CSS鼠标悬停图片加边框效果，不位移的方法

来源：互联网发布：淘宝发货清单怎么打印编辑：程序博客网时间：2024/05/01 14:19

<!DOCTYPE HTML><html lang="en-US"><head><title>css实现鼠标悬停时图片加边框效果</title><style type="text/css">body{background:#222;color:#06c;}em{ font-style:inherit;}img{background:white;margin:0 5px;width:70px;height:70px;}img:hover{border:1px red solid;}.demo2 img{border:1px solid transparent;}.demo2 img:hover{border:1px red solid;}.demo3 img:hover{width:68px;height:68px;border:1px solid yellow;}</style></head><body><div class="demo1"><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><em>明显看到当img标签在hover的时候由于出现边框导致位移</em></div><div class="demo2"><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><em>给每个img添加border:1px solid transparent;世界就和平了</em></div><div class="demo3"><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><em>修改width和height,世界继续和平</em></div></body></html>

0 0