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