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

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

明显看到当img标签在hover的时候由于出现边框导致位移

给每个img添加border:1px solid transparent;世界就和平了

修改width和height,世界继续和平