I have a WordPress site (on my localhost) that uses a <ul>
for a custom menu. How can I change the CSS of a <li>
on hover only if it has a <ul>
sub-menu?
All the main menu items have a border-radius and I want to remove this on the current item (Services, below) for example:
<div class="main-nav">
<ul class="menu" id="menu-main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul class="sub-menu">
<li><a href="#">Item One</a></li>
<li><a href="#>Item Two</a></li>
</ul>
</li>
<li><a href="#>Contact</a></li>
</ul>
</div>
I can't find a CSS solution and I've tried jQuery too:
$('ul.sub-menu').parent().hover(function(){
$(this).addClass('no-radius');
});
$('.menu li').has('ul').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$(".menu LI").hover(
function() {
if ($("UL", $(this)).length > 0) {
$(this).addClass("no-radius");
}
},
function() {
$(this).removeClass("no-radius");
}
);
Does this help:
$("li").hover(function(){ if($(this).parent().hasClass("sub-menu") { $(this).css("color", "red"); } });
$('li>ul.sub-menu').hover(function() {
$(this).addClass('no-radius');
}, function() {
$(this).removeClass('no-radius');
});
In Your solution this
refers to the ul
item and not its parent.
Instead this piece of code checks if any li
has a direct child of ul
with class= sub-menu
and then applies the desired class to the li
element.
Hope it helps,
Cheers!
$('ul.sub-menu').parent().hover(function(){
$(this).parent().addClass('no-radius');
});
You can always use console.debug($(this)) to check which element you are accessing
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.