在div内的img上设置悬停效果

I have a HTML in this fashion

我有这种方式的HTML

<div class="image_area">
   <a href="<?php echo base_url();?>product-detail?product=<?php echo $pl['product_slug'];?>">
     <img src="<?php echo base_url().$pl['product_image'];?>" 
                                style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
   </a>
</div>

I want a hover effect on the image such that the border gets highlighted.

我想在图像上悬停效果,使边框突出显示。

I have used this CSS code, but nothing happens

我使用过这个CSS代码,但没有任何反应

.image_area img :hover{ border: 1px solid #b6e2ff}

3 个解决方案

#1

.image_area img:hover{ border: 1px solid #b6e2ff}

No space after img

img之后没有空间

And to avoid jump of image when hovered, do :

为了避免在悬停时跳转图像,请执行以下操作:

.image_area img{ border:1px solid transparent}

or you can even better do

或者你甚至可以做得更好

.image_area a:hover img{ border: 1px solid #b6e2ff}

EDIT thanks to nevermind I didn't see this:

编辑感谢没关系我没有看到这个:

style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>

remove border:1px solid #cfcfcf from there, and put it in .image_area img{ border:1px solid transparent} or .image_area a img{ border:1px solid transparent}

从那里删除边框:1px solid #cfcfcf,并将其放入.image_area img {border:1px solid transparent}或.image_area img {border:1px solid transparent}

#2

No space between img and :hover
You can use

img和:hover之间没有空格你可以使用

.image_area > a img:hover{border:1px solid #b6e2ff;}

#3

two notes: 1. do not use style in your html code, add a new class with the following css:

两个注意事项:1。不要在你的html代码中使用样式,添加一个带有以下css的新类:

width:196px;
min-height:250px; 
max-height:250px; 
border:1px solid #cfcfcf;

2. you missed the ";" tag in the end of your line. try use this code:

   你错过了“;”标记在你的行的末尾。尝试使用此代码:

   .image_area img:hover { border: 1px solid #b6e2ff; }