Raj Raj - 2 months ago 3x
HTML Question

Onmouseover change image border

I have a image inside a div and I want to change the border colour.

The html is

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

And the css is

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

Now this won't work. But if I do

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

Then it works. Now my question is that on hover product-container div any img will then have the same border. How can I tell specifically that I want the border on those images which are right under the product-container div.

Any suggestion is highly appreciated.


To change the border only of the image that's the immediate child of product-container div then you should use .product-container:hover > a > img{ border:1px solid red; }

a > img is needed because your img is inside a href. That's why .product-container>img:hover isn't working

.product-container:hover > a > img{ border:1px solid red; }
<div class="product-container">
  <a href="#"><img src="http://placehold.it/350x150"></a>