找了半天鼠标浮动到图片添加边框样式，终于找到合适的了
今天页面上需要，就一直在网上找关于浮动加边框的样式，一直没有合适的，要不就是不显示，要不就是图片移动了，特意找了一个保存起来，以后的时候直接调用。<!DOCTYPE HTML><html><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="zhuanti.jpg" /><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><em>明显看到当img标签在hover的时候由于出现边框导致位移</em></div><div class="demo2"><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><em>给每个img添加border:1px solid transparent;世界就和平了</em></div><div class="demo3"><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><img src="zhuanti.jpg" /><em>修改width和height,世界继续和平</em></div></body></html>
个人推荐第三种方式去加边框，效果更好。
页:
[1]