您的位置：首页 > Web前端 > CSS

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

2015-09-23 16:56 633 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航