How to style next adjacent,previous adjacent and other list elements from a list element which is hovered?

Question

I am trying to make list elements opacity change from the element which is hovered my html markup is

            <ul class="list-unstyled">
            <li>
                Lorem ipsum dolor sit amet
            </li>
            <li>
                Consectetur adipiscing elit
            </li>
            <li>
                Integer molestie lorem at massa
            </li>
            <li>
                Facilisis in pretium nisl aliquet
            </li>
            <li>
                Nulla volutpat aliquam velit
            </li>
            <li>
                Faucibus porta lacus fringilla vel
            </li>
            <li>
                Aenean sit amet erat nunc
            </li>
            <li>
                Eget porttitor lorem
            </li>
        </ul>

where I am using this css

.list-unstyled li:first-of-type {
  opacity:1;
}
.list-unstyled li:nth-of-type(2){
  opacity:0.60;
}
.list-unstyled li:nth-of-type(3){
 opacity:0.35;
}
.list-unstyled li {
  opacity:0.35;
}
.list-unstyled li:hover {
  opacity:1 !important;
}
.list-unstyled li:hover ~ li {
 opacity:0.65 !important;
}
.list-unstyled li:hover ~ li ~li {
 opacity:0.35 !important;
}

I want to make hovered elements immediate siblings to have 35% opacity layer and rest to them should have 65% opacity layer.

while at initial stage I want the first li element to have opacity layer as 1 and when it is unhovered it should change to respective styling as other elements are hovered How can I achieve this.

Related (but not an exact dupe): http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector — Matt, Apr 29 '16 at 21:29

Shaggy · Answer 1 · 2016-05-07T13:54:13.917

CSS does not have a previous sibling selector so what you are looking to achieve is not possible using CSS alone.

If you are open to a JavaScript solution, you could do it like this:

var items=document.getElementsByTagName("li"),
    hovered=items[0],
    x=items.length,
    previous;
hovered.classList.add("hovered");
while(x--)
    items[x].addEventListener("mouseover",function(){
        hovered.classList.remove("hovered");
        if(previous)
            previous.classList.remove("previous");
        hovered=this;
        previous=this.previousSibling;
        hovered.classList.add("hovered");
        if(previous)
            previous.classList.add("previous");
    },0);

ul{list-style:none;margin:0;padding:0;}
li{width:100px;height:100px;background:red;display:inline-block;}
li{
  opacity:0.35;
  transition:opacity .25s;
}
.hovered{
  opacity:1;
}
.previous,.hovered+li{
  opacity:.65;
}

<ul><li></li><li></li><li></li><li></li><li></li></ul>

score 1 · Answer 2 · edited May 23 '17 at 12:15

1

+ and ~ selector can select next adjacent and other elements but unfortunately there is no css to select previous elements in css

Check this Is there a "previous sibling" CSS selector?

edited May 23 '17 at 12:15

Community

1
1

answered Apr 25 '16 at 10:59

Gaurav Aggarwal

9,809
6
36
74

score 1 · Answer 3 · answered Apr 25 '16 at 11:00

1

you only need to add one more css code

.list-unstyled:hover li:first-of-type {
  opacity:.35;
 }

Here is the working demo for your problem

answered Apr 25 '16 at 11:00

Syam Pillai

4,967
2
26
42

score -1 · Answer 4 · answered Apr 25 '16 at 10:56

-1

If it's an immediate sibling, you can use the + selector. Then any sibling that is not an immediate sibling can use the ~ selector

.list-unstyled li:hover + li {
  opacity:0.35;
}

.list-unstyled li:hover ~ li {
  opacity:0.65;
}

answered Apr 25 '16 at 10:56

Oli B

218
3
14

But with this method we can select only elements next to hovered. What about previous elements? – Gaurav Aggarwal Apr 25 '16 at 10:57
That is something that has always been a pain. Also, it'd be nice to select parents, rather than just children. In this case I wonder if you could use :not(:hover) – Oli B Apr 25 '16 at 11:34

How to style next adjacent,previous adjacent and other list elements from a list element which is hovered?

4 Answers4