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

我有一个电子商务网站，在产品列表上，当我将一个悬停时，所有产品都处于活动状态，就像我将所有产品悬停一样，如何只将悬停添加到一个，而另一个与同一类处于非活动状态，保持非活动状态，这是我的代码

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

---

什么是应用悬停类？使用CSS:hover psuedo类比使用Javascript应用显式类更有意义。听起来Javascript将hover类应用于具有特定类的所有元素。

应用hover类的是什么？使用CSS:hover psuedo类比使用Javascript应用显式类更有意义。听起来Javascript将hover类应用于具有特定类的所有元素。

@Fred-ii：可能重复：产品显示在哪里？请出示更完整的html@Fred-二：可能重复：产品陈列在哪里？请显示更完整的html

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