Question

有人知道为什么悬停在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”元素上时，它会以某种方式起作用。

Answer 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

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();
});

将鼠标悬停在ul上无效

3 个答案: