How to hover only the current li in nested ul?

by

A solution for subitems and also for parents is possible without JavaScript, when you will add some inline element, which will trigger hover state.

li>span:hover {
   background-color: lightgray;
   font-weight: bold;    
}
<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>

JSFiddle here.

More Related Contents:

  1. How to affect other elements when one element is hovered
  2. Inline elements shifting when made bold on hover
  3. Changing image on hover with CSS/HTML
  4. How to show text on image when hovering?
  5. How to make in CSS an overlay over an image?
  6. How to remove/ignore :hover css style on touch devices
  7. Hover effects not working with IE8
  8. CSS On hover show another element
  9. Change image on hover
  10. How to modify the fill color of an SVG image when being served as background image?
  11. Make flex items take content width, not width of parent container
  12. Style input type file? [duplicate]
  13. How to display scroll bar onto a html table
  14. How to apply CSS page-break to print a table with lots of rows?
  15. Remove default text/placeholder present in html5 input element of type=date
  16. issue with CSS media queries(scrollbar)
  17. CSS: Workaround to backdrop-filter?
  18. Inspect webkit-input-placeholder with developer tools
  19. How to create a curved speech bubble?
  20. Make an image width 100% of parent div, but not bigger than its own width
  21. How to center cards in bootstrap 4?
  22. Create line numbers on pre with CSS only
  23. HTML Div border not showing
  24. How do I assign multiple classes to one HTML element? [closed]
  25. How to center horizontally and vertically?
  26. How to change the text color of first select option
  27. How to use nth-child for styling with a table with rowspan?
  28. What does the question mark at then end of a css include url do?
  29. How to use bootstrap-theme.css with bootstrap 3?
  30. Select size attribute size not working in Chrome/Safari?

Leave a Comment