Question

在我的html代码中，我列出了这些<li>元素：

<li class="liitem" id="183"><span><a href="http://www.google.it"> Google </a> </span><br>
<ul><li><span><a href="http://www.gmail.com" target="_blank">gmail.com</a> </span><span id="183" style="float:right;display:none;"><a href="">delete</a></span></li></ul></li>

我想要这个：
当鼠标悬停在“liitem”类的<li>元素上时，则设置具有相同id的span的block：block（在这种情况下为183）。

我已经编写了这段代码，但它不完整，我不知道该怎么做：

var elms = document.getElementsByTagName('li');

for (var i = 0; i < elms.length; i++){
  if (elms[i].getAttribute('class') === 'liitem'){

    elms[i].onmouseover = function(){
      //set display:block
    }

    elms[i].onmouseout = function(){
      //set display:none
    }

  }
}

Answer 1

您设置的id具有相同的值id应该是唯一的。所以你可以为id添加一个值，使其与liitem's id不同。等。

确保a and span之间没有安全空间。

<ul>
<li class="liitem" id="183"><span><a href="http://www.google.it"> Google </a> </span><br>
<ul><li><span><a href="http://www.gmail.com" target="_blank">gmail.com</a></span><span style="float:right;display:none;"><a href="">delete</a></span></li></ul>
<ul><li><span><a href="http://www.google.com" target="_blank">docs</a></span><span style="float:right;display:none;"><a href="">delete</a></span></li></ul>
</li>
</ul>

var elms = document.getElementsByTagName('li'),
emls_len = elms.length;

for (var i = 0; i < emls_len; i++){

if (elms[i].className == 'liitem'){

var arr_sub_uls = document.getElementById(elms[i].id).getElementsByTagName('ul');

// for each UL within the liitem 
for (var j = 0; j < arr_sub_uls.length; j++){

// assign id's to the span around delete
var actionis = arr_sub_uls[j].childNodes[0].childNodes[1].id = elms[i].id + "_" + j;     // elms[i].id is the liitem id and j is the number of uls'

// attach the event handler
addEventHandler(arr_sub_uls[j].childNodes[0],actionis)

}
}
}


function  addEventHandler(s, actionis){
s.onmouseover = function(){ document.getElementById(actionis).style.display = "block" }
s.onmouseout = function(){ document.getElementById(actionis).style.display = "none" }
}

请参阅小提琴：http://jsfiddle.net/EW2cm/1/

Answer 2

你可以这样做：

elms[i].style.display = "block";

和

elms[i].style.display = "none";

有没有办法用鼠标悬停显示这些隐藏的元素？

2 个答案: