I'm trying to apply a hover effect to a UL, but the UL which is a child of one list item also gets the effect, which I don't want. I tried all sorts of things, for instance using the > sign and the .not() selector, but without succes.
Here's my (simplified) 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>
Some snippets of CSS that might be relevant:
#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;
开发者_Python百科display: none;
margin-left: 0;
padding-left: 0;
}
ul#menu_varianten li a{
padding-left: 4em;
height:30px;
}
And here's the 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);
});
I also tried the selector ("ul#menu > li").not("#menu_varianten"), but it doesn't work unfortunately. Someone with ideas?
You can try only expanding the first anchor.
Leave your HTML and CSS as they are and change the javascript to:
$("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);
});
http://jsfiddle.net/RCtFU/1/
You may want to make each submenu a sibling of each parent. CSS inherits, so this would be a pretty simple avoidance of the problem.
Example: http://jsfiddle.net/RCtFU/
<li class="menubox">
<a href="#" id="varianten">Producten</a>
</li>
<li class="menubox"> <!-- probably want to change the class -->
<ul id="menu_varianten">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
You'll need to do some further adjustments (different classes, etc.) to distinguish between menus and submenus.
You can use the css3 :not()
selector:
$("ul#menu > li :not(ul)").hover(
function() {
$(this).stop(true, true).animate({
fontSize: "1.4em"
}, 150);
}, function() {
$(this).stop(true, true).animate({
fontSize: "1.0em"
}, 150);
});
See jsFiddle.
精彩评论