3

How to fly only the current stream in the embedded ul?

 2 years ago
source link: https://www.codesd.com/item/how-to-fly-only-the-current-stream-in-the-embedded-ul.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to fly only the current stream in the embedded ul?

advertisements

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>

Problem is, hovering foo will also hover fnord and all its li-elements. How do I only hover the li my mouse is actually hovering over?

The nesting is variable and can, in theory, be endless.

I have setup a JsFiddle.

I believe the closest you can get with just css is to remove the hover styling from the children of the hovered elements... which doesn't help the parents. FIDDLE

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

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

FIDDLE of answer from there. You'll want to be more specific than 'all lis' in that selector though.

$('li').mouseover(function(e)
{
    e.stopPropagation();
    $(this).addClass('currentHover');
});

$('li').mouseout(function()
{
    $(this).removeClass('currentHover');
});

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK