javascript - 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.

question from:https://stackoverflow.com/questions/66047761/change-css-class-when-hovering-html-element

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>