[英]hovering over ul does not work
Does anybody know why hovering over ul elements does not work? 有人知道为什么将鼠标悬停在ul元素上不起作用吗?
http://jsfiddle.net/Samfr/5/ 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>
I am trying to hover over the elements in the list and having other elements pop up when hovered over, but somehow it does not work when you hover over the ul "hover-name" element in the fiddle. 我试图将鼠标悬停在列表中的元素上,并将其他元素悬停在上方,但是当您将鼠标悬停在小提琴中的ul“ hover-name”元素上时,它不起作用。
You need to apply hover event for last li
seperately since your last li
doesn't have any anchor with class light
: 您需要分别为上一个
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();
});
If you don't want to follow above way like in your comment, why not just target your li
instead of the anchor: 如果您不想按照评论中的步骤进行操作,为什么不直接针对
li
而不是锚点:
$('.navi > li').on("mouseover", function () {
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
delete the 删除
a class='light'
of the other 2 items, and change the 其他2项,然后更改
$('.navi > li a.light')
to 至
$('.navi > li')
While @Felix's answer are good. @Felix的答案很好。 You can also remove
a.light
from selector: 您也可以从选择器中删除
a.light
:
$('.navi > li').on("mouseover", function () {
$('.hover-name', this).show();
}).on("mouseout", function() {
$('.hover-name').hide();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.