我有这样的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}

最佳答案

.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}


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

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}

关于html - 在div内的img上设置悬停效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30000118/

10-12 12:59
查看更多