在悬停元素时更改列表（ul）的所有其他元素li的css属性

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> 

Answer 2

You can try by using parent selector

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

Answer 3

Can't traverse up the DOM with CSS but for your example you can fake it like this..

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

fiddle

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

Here's another way to fake it (affect an element that is above it on the page, but not in the dom). It doesn't apply in this case but may be worth mentioning for future readers.

Answer 4

Yes it's possible with :not negation pseudo class.

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

Answer 5

Try this

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

This worked for me

Answer 6

The shortest and most elegant solution uses the :not selector :

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

Answer 7

It's possible to target all siblings that follow the element you're currently hovering over using the general sibling selector ( ~ ) :

 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> 

You can also use the adjacent sibling combinator ( + ) to target the sibling element that immediately follows the element you're currently hovering over:

 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> 

Unfortunately it is not possible to target previous siblings, so you cannot target element 2 and highlight element 1 , for example.

However , one solution might be to instead apply the hover to the <ul> , and simply 'reset' the hovered <li> to default with 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> 

Another solution (and perhaps the most elegant) would be to make use of the :not pseudo-class :

 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> 

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