我正在尝试对 UL 应用悬停效果,但作为一个列表项的子项的 UL 也会获得该效果,这是我不想要的。我尝试了各种方法,例如使用 > 符号和 .not() 选择器,但没有成功。
这是我的(简化的)HTML:
<ul id="menu">
<li class="menubox"><a href="#">Home</a></li>
<li class="menubox"><a href="#">Over Ons</a></li>
<li class="menubox"><a href="#" id="varianten">Producten</a>
<ul id="menu_varianten">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li class="menubox"><a href="#">Forum</a></li>
</ul>
一些可能相关的 CSS 片段:
#menu {
position: relative;
width: 250px;
}
ul#menu{
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul#menu li a{
display: block;
text-decoration: none;
height: 40px;
}
#menu_varianten{
list-style: none;
display: none;
margin-left: 0;
padding-left: 0;
}
ul#menu_varianten li a{
padding-left: 4em;
height:30px;
}
这是 jQuery:
$("ul#menu > li").hover(
function() {
$(this).stop(true, true).animate({fontSize:"1.4em"}, 150);
},
function() {
$(this).stop(true, true).animate({fontSize:"1.0em"}, 150);
});
我还尝试了选择器 ("ul#menu > li").not("#menu_varianten"),但不幸的是它不起作用。有想法的人吗?
最佳答案
您可以尝试仅扩展第一个 anchor 。
保持 HTML 和 CSS 不变,并将 javascript 更改为:
$("ul#menu li").hover(
function() {
$(this).find('a').first().stop(true, true).animate({
fontSize: "1.4em"
}, 150);
}, function() {
$(this).find('a').first().stop(true, true).animate({
fontSize: "1.0em"
}, 150);
});
关于jquery - 在 jQuery 中突出显示列表项而不突出显示其子项(另一个 UL),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5031983/