CODEWITHSUNDEEP
javascripthtmlcss
Robert Hovhannisyan
Robert Hovhannisyan

Reputation: 3335

Change style of one particular list item by hovering it - CSS

I have a list like this and I want it to change the font-weight to bold of the list item which I was hovering but instead of that it applies the changes for the whole list of all lists of my document (depends on my attempts)

li:hover {
  cursor: pointer;
  font-weight: bold;
}
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="2.css">
</head>
<body>

  <ul class="tree" id="tree">
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>
</html>

I want to know is there a way to do it without adding IDs or classes to the elements.

And I want it to do in a dynamic way.

If there's a way to do it with JS it will be great too.

Upvotes: 2

Views: 1030

Answers (5)

Jacob
Jacob

Reputation: 78850

Here's an approach that seems to work. To explain:

  • li elements are explicitly given a font-weight: normal so that font-weight: bold on parents doesn't cascade.
  • A mouseover event handler is placed on the top level to handle all descendent events. The true useCapture parameter for addEventListener allows us to do this.
  • We allow the event to continue bubbling until we hit an li target.
  • We then programmatically set the font-weight for the li
  • By preventing further propagation, we make sure that parent li elements aren't notified when a descendent has already been bolded

const tree = document.getElementById('tree');
tree.addEventListener('mouseover', (event) => {
  if (event.target.tagName === 'LI') {
    event.target.style.fontWeight = 'bold';
    event.stopPropagation();
  }
}, true);
tree.addEventListener('mouseout', (event) => {
  if (event.target.tagName === 'LI') {
    event.target.style.removeProperty('font-weight');
  }
}, true);
#tree li {
  cursor: pointer;
  font-weight: normal;
}
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="2.css">
</head>
<body>

  <ul class="tree" id="tree">
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>
</html>

Upvotes: 2

Sorab Khanna
Sorab Khanna

Reputation: 31

Rest all is fine, just try this CSS code: 

ul li ul li ul li:hover {
    /* Here write your styling code */
}

I hope that this will help.

Upvotes: 1

Nicholas Okonneh
Nicholas Okonneh

Reputation: 71

ul li ul li ul li:hover {
            cursor: pointer;
            font-weight: bold;
        }

Replace your styling with this and you'll be good to go.

Upvotes: 0

David Boroš
David Boroš

Reputation: 665

Following @Armin Guearmazi's answer, this should kinda work:

ul li ul li ul li:hover,
ul li ul li:hover,
ul li:hover {
  cursor: pointer;
  font-weight: bold;
}


ul li ul li:hover ul,
ul li:hover li,
ul li:hover ul {
  cursor: normal;
  font-weight: normal;
}
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="2.css">
</head>
<body>

  <ul class="tree" id="tree">
    <li>Animals
      <ul>
        <li>Mammals
          <ul>
            <li>Cows</li>
            <li>Donkeys</li>
            <li>Dogs</li>
            <li>Tigers</li>
          </ul>
        </li>
        <li>Other
          <ul>
            <li>Snakes</li>
            <li>Birds</li>
            <li>Lizards</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Fishes
      <ul>
        <li>Aquarium
          <ul>
            <li>Guppy</li>
            <li>Angelfish</li>
          </ul>
        </li>
        <li>Sea
          <ul>
            <li>Sea trout</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>
</html>

Upvotes: 2

Amin Guermazi
Amin Guermazi

Reputation: 1722

You can use css element selectors to select some tags contained in another one. Its syntax is very simple:

ul li ul li ul li:hover {
   /*Your style here*/
}

See a demo

Upvotes: 0

Related Questions