Onmouseover画像の境界を変更する

Question

div内に画像があり、境界線の色を変更したい。

htmlが

<div class="product-container"> 
    <a href="#"><img src="images/someimg.jpg"></a> 
</div> 

あるとCSSは今、これは動作しません

.product-container:hover .product-container img{ border:1px solid red; } 

です。しかし、私がする場合

.product-container:hover img{ border:1px solid red; } 

それは動作します。今私の質問は、ホバリング製品 - コンテナdivのすべてのimgは、同じ境界を持つことです。どのようにすれば、商品コンテナ部門の直下にある画像上に境界線が必要なのかを具体的にどのように伝えることができますか。

どのような提案も高く評価されています。このルールは唯一のクラス.productコンテナとのイメージのため、あなたが.product-container:hover img{ border:1px solid red; }

がホバーし、任意のクラスproduct-containerでその何を意味持っているもの

img.product-container:hover { border:1px solid red; } 

を使用する必要があると言うこと

Answer 1

になります内部はhrefです。 .product-container>img:hoverが

.product-container:hover > a > img{ border:1px solid red; }

<div class="product-container"> 
 
    <a href="#"><img src="http://placehold.it/350x150"></a> 
 
</div>

Answer 2

画像は、私は実際にあなたが必要な質問を読み違え

更新

1つのピクセル赤い枠を持っている必要がありますクラスの子であるためにIMG： それだけproduct-container div要素の直接の子は、あなたがあなたのimgであるため .product-container:hover > a > img{ border:1px solid red; }

a > imgが必要とされている使用するべきだ画像の枠線を変更するには.product-container>img:hover