将鼠标悬停在ul上不起作用

Question

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

http://jsfiddle.net/Samfr/5/

<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”元素上时，它不起作用。

Answer 1

您需要分别为上一个li悬停事件，因为您的上一个li没有class light锚点：

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

更新小提琴

---

如果您不想按照评论中的步骤进行操作，为什么不直接针对li而不是锚点：

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

更新小提琴

Answer 2

删除

a class='light'

其他2项，然后更改

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

至

$('.navi > li')

Answer 3

@Felix的答案很好。 您也可以从选择器中删除a.light ：

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