javascript - 悬停html元素时更改css类

Question

我有一个带有 class 的 div 循环item。当鼠标悬停在元素上时，active-item通过 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>

当item active-item类出现时，我想添加opacity: 0到item类，并添加opacity :1到item active-item. 我需要在没有 的情况下这样做:hover，因为它的扩展卡和鼠标离开项目时，它将是opacity:0.

标签： javascriptcss

Answer 1

此任务无需使用 JS

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