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

Question

我有这种方式的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>

我想在图像上悬停效果，以便突出显示边框。

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

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

Answer 1

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

img之后没有空格

为了避免在悬停时跳跃图像，请执行以下操作：

.image_area img{ border:1px solid transparent}

或者你甚至可以做得更好

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

编辑感谢Nevermind 我没有看到这个：

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

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

Answer 2

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

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

Answer 3

两个说明： 1.不要在你的html代码中使用样式，添加一个包含以下css的新类：

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

1. 你错过了＆＃34 ;;＆＃34;标记在你的行的末尾。尝试使用此代码：

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