Change the css property of all the other li elements of the list (ul) on hover

Question

I really want to know if it is possible to change the property of all the other elements of the list when it wraps one element at it.

Say that when I find "element 2", I want the rest: the property "element 1", "element 3" and "element 4" css color changed to "red", but not on a pair.

Is this possible with css? is there a css selector for this actual function?

<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>

Run codeHide result

Answer 1

You can change the color of all children liusing the pseudo-class :hoverin the parent ul.

:

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>

Hide result

Answer 2

ul:hover li { color:red; }
ul li:hover { color:white;} // that should be default color

Answer 3

DOM CSS, .

#list {
  background-color: gray;
  list-style-type: none;
  padding: 0;
}
#list:hover {
  background-color: red;
}
.element:hover {
  background-color: gray;
}

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

Hide result

https://jsfiddle.net/Hastig/u4w0z4sn/

( , , dom). , , , .

Answer 4

, :not .

#list > .element:not(:hover) {
  color: red;
}

<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>

Hide result

Answer 5

<ul id="list">
    <li class="element">element 1</li>
    <li class="element">element 2</li>
    <li class="element">element 2</li>
    <li class="element">element 4</li>
<ul>
<style>
#list:hover{
    color:red;
}
 .element:hover {
    color: black; /* Replace black with Default color */
}
</style>

Answer 6

:not:

#list:hover .element:not(:hover) {color: red}

<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>

Hide result

Answer 7

, , , (~):

ul > li:hover ~ li {
  color: red;
}

<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>

Hide result

ul > li:hover + li {
  color: red;
}

<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>

, , element 2 element 1, .

<ul> "reset" <li> color: inherit:

ul:hover > li {
  color: red;
}

ul:hover > li:hover {
  color: inherit;
}

<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>

Hide result

(, , ) :not :

ul > li:not(:hover) {
  color: red;
}

<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>

Hide result

Keep in mind that it is :notnot supported in Internet Explorer 8 and earlier.