悬停在 ul 上不起作用答案

【问题标题】：hovering over ul does not work悬停在 ul 上不起作用
【发布时间】：2014-02-13 01:26:57
【问题描述】：

有人知道为什么悬停在 ul 元素上不起作用吗？

<ul class="navi">
    <li> <a class='light'>
            Item1
            <div class="hover-name" style="display:none">
                Businesses
            </div>
        </a>

    </li>
    <li> <a class='light'>
            Item2
            <div class="hover-name" style="display:none">
               Agencies
            </div>
        </a>

    </li>
    <li>            
        Item3
        <ul class="hover-name" style="display:none">
            <li><a>hello</a></li>
            <li><a>hello2</a></li>
        </ul>
    </li>
</ul>

我试图将鼠标悬停在列表中的元素上，并在悬停时弹出其他元素，但是当您将鼠标悬停在小提琴中的 ul "hover-name" 元素上时，它以某种方式不起作用。

【问题讨论】：

到底出了什么问题？
我的解释不是很清楚抱歉，如果你看小提琴，你可以将鼠标悬停在 Item1，Item2，但不是 Item3
Item3 没有 a.light，或者没有 Anchor 标记与 Light 类。

标签： javascript jquery html css

【解决方案1】：

您需要为最后一个 li 单独应用悬停事件，因为您的最后一个 li 没有任何类 light 的锚：

$('.navi > li a.light, .navi li:last-child').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

Updated Fiddle

如果您不想像评论中那样遵循上述方式，为什么不直接定位您的 li 而不是锚：

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

Updated Fiddle

【讨论】：

感谢您的回复！有用。如果它不是最后一个孩子，我将如何解决这个问题，就像任何随机元素一样？
@James 您可以只定位您的列表项而不是锚点。检查我的更新

【解决方案2】：

删除

a class='light'

其他2项，并更改

$('.navi > li a.light')

到

$('.navi > li')

【讨论】：

【解决方案3】：

虽然@Felix 的回答很好。你也可以从选择器中移除a.light：

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

【讨论】：