Change css property of all the other elements li of a list (ul) while hovering an element

Question

I really want to know if it's possible to change a property of all the other elements of a list while hovering one element of it.

Let's say that when I hover the "element 2", I want the others: "element 1", "element 3" and "element 4" css color property to change to "red" but not the hovered one.

Is it something possible just with css? is there a css selector for that actual feature?

<ul id="list">
  <li class="element">element 1</li>
  <li class="element">element 2</li>
  <li class="element">element 3</li>
  <li class="element">element 4</li>
<ul>

Answer 1

You can change the color of all li children by using the pseudo class :hover on the parent ul.

Then you just need to override the child currently hovered and set it back to the original color:

ul:hover > li {
 color: red;
}

ul > li:hover {
  color: black;
}

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
</ul>