將鼠標懸停在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();
});