1つの要素のみアクティブにします（アクティブなもの）

Question

私は電子メールサイトを持っています。私がホバーすると、製品リストにはアクティブな状態があります。それらのすべてをホバリングし、ホバーを1つに追加する方法、同じクラスで、非アクティブ、非アクティブのまま、これは私のコード

<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

？ Javascriptを使用して明示的なクラスを適用するのではなく、CSS：hover psuedoclassを使用する方が理にかなっています。 Javascriptのようなサウンドは、特定のクラスを持つすべての要素にホバークラスを適用しています。