Change css class when hovering html element

Question

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 .

Answer 1

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>

Answer 2

So, if you already have the Js part that adds the active class, then you can do this:

.item {
  opacity: 0;
}

.item.active {
  opcaity: 1;
}

But if you want to avoid Js at all you can do that:

.item {
  opacity: 0;
}

.item:hover {
  opcaity: 1;
}