悬停 html 元素时更改 css class

Question

我有一个带有 class item的 div 循环。 当鼠标悬停在元素上时，通过 javascript 添加active-item class：

<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 class 出现时，我想将opacity: 0添加到item class ，并将opacity:1添加到item active-item 。 我需要在没有:hover的情况下这样做，因为它的扩展卡和鼠标离开项目时，它将是opacity:0 。

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>

Answer 2

因此，如果您已经拥有添加活动 class 的 Js 部分，那么您可以这样做：

.item {
  opacity: 0;
}

.item.active {
  opcaity: 1;
}

但是如果你想完全避免 Js，你可以这样做：

.item {
  opacity: 0;
}

.item:hover {
  opcaity: 1;
}