Kevin Powell - Community•2y ago

Help needed with Pseudo classes.

Im trying to make something like, when a list item is hovered, the rest of the list items should become little bit transparent.

 <div class="flex weekly-forecast ">
<ul class="flex daily-weekly-forecast">
<li class="flex fd-column day">
                  
</li>
<li class="flex fd-column day">
                  
</li>
</ul>
</div>

 <div class="flex weekly-forecast ">
<ul class="flex daily-weekly-forecast">
<li class="flex fd-column day">
                  
</li>
<li class="flex fd-column day">
                  
</li>
</ul>
</div>

my css is something like this,

 .weekly-forecast ul li:hover li {
    /* border: 20px solid red; */
    opacity: 0.3;
    color: transparent;

}

 .weekly-forecast ul li:hover li {
    /* border: 20px solid red; */
    opacity: 0.3;
    color: transparent;

}

How should i do it?

2 Replies

MarkBoots•2y ago

you can use the has-selector (not fully supported yet https://caniuse.com/css-has) so if daily-weekly-forecast has a list item that is hovered, set the opacity to all list items that are not hovered

.daily-weekly-forecast:has(>li:hover) > li:not(:hover) {
  opacity: 0.3
}

.daily-weekly-forecast:has(>li:hover) > li:not(:hover) {
  opacity: 0.3
}

other option is to set opacity of the list items when the .daily-weekly-forecast is hovered, with exemption of the li that is hovered Downfall for this is that all list items will get an opacity when you hover the gap in between the cards

.daily-weekly-forecast:hover > li:not(:hover) {
  opacity: 0.3
}

.daily-weekly-forecast:hover > li:not(:hover) {
  opacity: 0.3
}

AvinashOP•2y ago

yeah i noticed. the above code is working on brave. i was wondering can this be done something like when list item is hovered, apply opacity to all the list items and then the current list item hovered add opacity:1 think

Gaming

Programming

Help needed with Pseudo classes.