为什么在事件委托里要控制li的display属性，只有第一个li有起作用，其他的li下的display不起作用

Question

<ul id='ul1'> 

<li><img src="images//left_meng.jpg"><p>萌主页</p><div id='hiden'></div></li>

<li><img src="images//left_LOL.jpg"><p>LOL直播</p><div id='hiden'></div></li>

<li><img src="images//left_dongman.jpg"><p>动漫</p><div id='hiden'></div></li>

<li><img src="images//left_jingdian.jpg"><p>景点门票</p><div id='hiden'></div></li>

<li><img src="images//left_haodaojia.jpg"><p>hao到家</p><div id='hiden'></div></li>

</ul>

window.onload=function  () {

var oframe=document.getElementById('frame');

var oul=document.getElementById('ul1');

var oli=oul.getElementsByTagName('li');

oul.onmouseover=function  (ev) {

var oevent=ev||window.event;

var target=oevent.target||window.srcElement;

        console.log(target.nodeName);

        if (target.nodeName.toLowerCase()=='li'||target.nodeName.toLowerCase()=='img' ) {

        var ohiden=document.getElementById('hiden');

        ohiden.style.display='block';

        

        }

}

oul.onmouseout=function  (ev) {

var oevent=ev||window.event;

var target=oevent.target||window.srcElement;

if (target.nodeName.toLowerCase()=='li'||target.nodeName.toLowerCase()=='img') {

var ohiden=document.getElementById('hiden');

ohiden.style.display='';

}

}

}

Answer 1

页面的id不可以重复，你重复了。所以就只能取到第一个了。你可以通过tagName来获取这些li，也可以通过className来获取。