I have a loop of divs with a class item. When mouseover on an element, active-item class is added via javascript:
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<!--on mouseover-->
<div class="item active-item"></div>
<div class="item"></div>
<div class="item"></div>
When item active-item class appears, I want to add opacity: 0 to item class, and to add opacity :1 to item active-item. I need to do it without :hover, because that its expand card and when mouse will leave item, it will be opacity:0.
No need to use JS for this task
.itemcontainer:hover .item:not(:hover) {
opacity: 0
}<div class="itemcontainer">
<div class="item">1
</div>
<div class="item">2
</div>
<div class="item">3
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments