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

最新推荐文章于 2022-10-11 10:49:08 发布

weixin_30296405

最新推荐文章于 2022-10-11 10:49:08 发布

阅读量443

点赞数

原文链接：http://www.cnblogs.com/wjj5728/p/5858535.html

版权

<!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>

　　代码保存打开

1.修改width和height

2.给每个img添加border:1px solid transparent（如果是div或者块元素出现这种情况也可以加，谁出现谁加就对了）


转载http://www.codefans.net/jscss/code/3039.shtml

转载于:https://www.cnblogs.com/wjj5728/p/5858535.html

weixin_30296405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML><html lang="en-US"><head><title>css实现鼠标悬停时图片加边框效果</title><style type="text/css"> body{background:#222;color:#06c;} e...
复制链接

扫一扫