somepaulo somepaulo - 3 months ago 10
CSS Question

jQuery target parent of hidden element on hover (or not)

I'm trying to add a class (or CSS) to an

a
, the parent of a hidden
ul
, which shows up when the grand-parent
li
is hovered.

I can't change the code directly to get the result, so I need jQuery.

The code goes like this:

HTML



<nav class="main-menu">
<ul>
<li>
<a>
<ul class="sub-menu">


CSS



.main-menu .sub-menu {display: none;}
.main-menu li:hover .sub-menu {display: block;}
.hovered {color: red;}


And here is what I'm trying with jQuery, but it doesn't work:

jQuery



jQuery(".nm-main-menu ul.sub-menu).hover(function(){
jQuery(this).parent().addClass("hovered");
});


Here it is all in a fiddle.

Maybe
.hover()
is not the way to go...

Please help.

Answer
jQuery(".nm-main-menu ul.sub-menu").hover(function(){
  jQuery(this).parent().addClass("hovered");
});

You missed a double quote inside the selector. It's working.

Fiddle: https://jsfiddle.net/gyowv1dx/1/