首页 > 代码库 > CSS鼠标悬停图片加边框效果,不位移的方法
CSS鼠标悬停图片加边框效果,不位移的方法
<!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="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <em>明显看到当img标签在hover的时候由于出现边框导致位移</em> </div><div class="demo2"> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <em>给每个img添加border:1px solid transparent;世界就和平了</em> </div><div class="demo3"> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <img src="http://www.mamicode.com/jscss/demoimg/wall_s6.jpg" /> <em>修改width和height,世界继续和平</em> </div></body></html>代码保存打开
1.修改width和height2.给每个img添加border:1px solid transparent（如果是div或者块元素出现这种情况也可以加，谁出现谁加就对了）
转载http://www.codefans.net/jscss/code/3039.shtml
CSS鼠标悬停图片加边框效果,不位移的方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。