Geek Answers Handbook

How to put only current li in nested ul?

I have a nested list:

li:hover { background-color: lightgray; } ul li ul li:hover { font-weight: bold; } 
 <ul> <li>fnord <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>foo</li> </ul> </li> </ul> </li> <li>gnarf <ul> <li>baz</li> <li>foo <ul> <li>baz</li> <li>yolo</li> </ul> </li> </ul> </li> </ul>

The problem is that foo hangs also hangs fnord and all its li elements. How can I only hang on the fact that my mouse is actually freezing?

Nesting is variable and can theoretically be infinite.

I have a JsFiddle installation.

+6
source share
4 answers

I believe that the closest you can get is css to remove the child’s hovering style of hovering elements ... which does not help parents. Fiddle

 li:hover { background-color: lightgray; } li:hover { font-weight: bold; } li:hover ul { background-color: white; font-weight: normal; }

The accepted answer to the duplicate you found is the best way I've seen to do this using javascript using e.stopPropagation: Cascading <li> -hover effect using CSS

FIDDLE response from there. You want to be more specific than the "all lis" in this selector, though.

 $('li').mouseover(function(e) { e.stopPropagation(); $(this).addClass('currentHover'); }); $('li').mouseout(function() { $(this).removeClass('currentHover'); });
+7
source

The solution for sub-items as well as for parents is possible without javascript when you add some inline element that will cause a hang.

 <ul> <li><span>fnord</span> <ul> <li><span>baz</span></li> <li><span>foo</span> <ul> <li><span>baz</span></li> <li><span>foo</span></li> </ul> </li> </ul> </li> </ul>

CSS

 li>span:hover { background-color: lightgray; font-weight: bold; }

JsFiddle is here.

+4
source

So, you just want to aim straight for it? Try the following:

  ul li ul li:hover{ background-color: red; }

Demo here

Edit

I also added another EXAMPLE where the menu can indeed continue to expand.

+3
source

Use this selector to freeze

 ul ul li:hover {}
  • it can only style an element with foo
+1
source

More articles:


All Articles