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

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

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