仅悬停一个元素（活动一个）

Question

我有一个电子商务网站，当我悬停一个产品列表时，al产品处于活动状态，就像我将所有这些产品悬停在一起，如何将hover仅添加到一个，而另一个在同一个类中处于非活动状态，保持不活动状态，这是我的代码

<div class="product">
  <div class="product-hover">
    <p> SOME PHP CALLS HERE</p>
  </div>
  <p>some php here</p>
</div>

和我的CSS：

.product-hover {
  display: none;
  background-color: #FEEEEE;
  float: right;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

.product:hover .product-hover {
  display: block;
  line-height: 25;
}

.product {
  background: red;
}

Answer 1

什么是应用悬停类？使用CSS更有意义：悬停psuedoclass而不是使用Javascript来应用显式类。听起来像Javascript正在将悬停类应用于具有特定类的所有元素。