Javascript 动态<；ul>；及<；李>；悬停在<；ul>；显示<；李>；_Javascript_Html

Javascript 动态<；ul>；及<；李>；悬停在<；ul>；显示<；李>；

javascript html

Javascript 动态<；ul>；及<；李>；悬停在<；ul>；显示<；李>；,javascript,html,Javascript,Html,我有3个，每个元素有1个隐藏悬停在1上，我只想显示其中的悬停问题是，当我将鼠标悬停在1元素上时，它将悬停在所有3元素上，并显示所有元素下面是我的代码 <html> <head> <script> function chh() { for (var i = 0; i < document.getElementsByTagName("ul").length; i++) { document.getElementsByTag

我有3个

，每个元素有1个隐藏悬停在1上，我只想显示其中的悬停

问题是，当我将鼠标悬停在1元素上时，它将悬停在所有3元素上，并显示所有元素
下面是我的代码
<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>


函数chh（）
{
对于（var i=0；i
已发送好友请求
取消请求



已发送好友请求
取消请求


已发送好友请求
取消请求


演示：
您的第二个循环将遍历所有
并将其显示设置为块。您需要选择悬停在上的
内的

快速解决办法是：
function chh()
{
    for (var i = 0; i < document.getElementsByTagName("ul").length; i++)
    {
        document.getElementsByTagName("ul")[i].onmouseover = function()
        {
            this.childNodes[1].style.display = "block";         
        }
    }
}    

函数chh（）
{
对于（var i=0；i
您可以使用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>


另外，请注意，我已将发送的好友请求
放在li
中。这是因为ul
的所有子级必须是li
。其他内容都是无效的html。
我在这里只显示了三个
我有50个+
从数据库动态调用，所以我不能使用id和类来实现这一点，这就是为什么我尝试这样做的原因。我个人更喜欢CSS解决方案。这将允许鼠标悬停在所有浏览器上运行。这将完美地在所有浏览器上运行。一些移动浏览器可能与JS+有问题。并非所有人都允许JS。我在这里使用了childNodes[1]
，因为文本节点“Friend Request Sent”被视为childNodes[0]
。更好的方法是使用jquery的$（this.find（“li”）.css（“display”、“block”）
查找第一个
。使用本机javascript执行相同的任务也是可能的，但会更混乱，请检查：将该信息添加到答案中。你会有更多的机会，谢谢你的努力，两个答案都很完美，但我更喜欢这一个