Question

我有3 <ul>，每个<ul>元素在1 <li style="display:none;">上有1个隐藏<ul>悬停我想只显示<li> <ul> <ul> 1}}悬停

问题是当我将鼠标悬停在1个<ul>元素上时，它将悬停在所有3个<li>元素上并显示所有<html> <head> <script> function chh() { for (var i = 0; i < document.getElementsByTagName("ul").length; i++) { document.getElementsByTagName("ul")[i].onmouseover = function() { for (var i = 0; i < document.getElementsByTagName("li").length; i++) { document.getElementsByTagName("li")[i].style.display = "block"; } } } } </script> </head> <body onLoad="chh();"> <ul> Friend Request Sent <li style="display:none;">Cancel Request</li> </ul> <ul> Friend Request Sent <li style="display:none;">Cancel Request</li> </ul> <ul> Friend Request Sent <li style="display:none;">Cancel Request</li> </ul> </body> </html>元素。

以下是我的代码

{{1}}

演示：http://jsfiddle.net/vZeP4/

Answer 1

您可以使用css执行此操作，而无需使用任何JavaScript。

<强> HTML

<ul>
    <li class="message">Friend Request Sent</li>
    <li class="cancel">Cancel Request</li>
</ul>
<ul>
    <li class="message">Friend Request Sent</li>
    <li class="cancel">Cancel Request</li>
</ul>
<ul>
    <li class="message">Friend Request Sent</li>
    <li class="cancel">Cancel Request</li>
</ul>

<强> CSS

ul {
    margin-bottom: 20px;
}

ul > .cancel {
    display: none;
}
ul:hover > .cancel {
    display: block;
}

<强> Demo

另请注意，我已将Friend Request Sent放入li。这是因为ul的所有孩子都必须是li。其他任何东西都是无效的HTML。

Answer 2

您的第二个循环遍历所有<li>并将其显示设置为block。您需要选择<li>内的<ul>。function chh() { for (var i = 0; i < document.getElementsByTagName("ul").length; i++) { document.getElementsByTagName("ul")[i].onmouseover = function() { this.childNodes[1].style.display = "block"; } } }。

快速解决方法是：

{{1}}

悬停在<ul>中的动态<ul>和<li>显示<li> </li> </ul> </li> </ul>

2 个答案: