Styling sibiling li items of list on hover

Question

Basically I have a list of items and when I hover over the last one, I want all others to change their background-color as well. So far, I tried few workarounds but without success.

<ul class ='profile'>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>

ul.profile > li:nth-child(3):hover {
  background-color: red;
}

This cant really be done efficently with only css, are you using pure js, or jquery? — Lukáš Gibo Vaic, Apr 17 '19 at 07:06
There is no selector that can target previous siblings. For that you need a script, or use Flexbox, where one can have one order visually, and another in markup. — Asons, Apr 17 '19 at 08:13
The dupe link has some tricks as well, the Flexbox solution included. — Asons, Apr 17 '19 at 08:16

score 1 · Answer 1 · answered Apr 17 '19 at 07:09

1

Just try this:

ul.profile:hover > li:not(:hover) {
  background-color: yellow;
}
ul.profile > li:nth-child(3):hover {
  background-color: red;
}

answered Apr 17 '19 at 07:09

encodeslife

123
7

I think this is a good solution – Sfili_81 Apr 17 '19 at 07:10
I made a jsfiddle with your answer: https://jsfiddle.net/nr48qocd/ I don't need the others colored in yellow, but if I change it to red, doesn't matter which one I hover, the other will get colored. Only last item of list should trigger coloring of others on hover – Apr 17 '19 at 07:35

Daan Seuntjens · Answer 2 · 2019-04-18T11:16:45.397

-1

If you just want to change the background of the whole ul when hovering over a certain li then you can use a little css trick with pointer-events.

You need to set the <ul> with pointer-events: none; , and the <li> that you want to hover over with pointer-events: auto;.

Note: Because you disable pointer-events, links etc. won't work either.

A code snippet as example:

ul.profile {  
    pointer-events: none;
}

ul.profile li:nth-child(3) {
    pointer-events: auto;
}

ul.profile:hover {
    background-color: red;
}

<ul class ='profile'>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>

edited Apr 18 '19 at 11:16

answered Apr 17 '19 at 07:08

Daan Seuntjens

880
1
18
37

this one looks like the solution, but i cannot click the other links now – Apr 17 '19 at 07:42

Styling sibiling li items of list on hover

2 Answers2