Board logo

标题: [CSS教程] CSS实用教程:鼠标悬停图片加边框效果 [打印本页]

作者: 爱你不要你    时间: 2015-5-4 22:27     标题: CSS实用教程:鼠标悬停图片加边框效果

CSS给图片Hover加边框,不位移的方法,当鼠标滑过图片时,图片出现用CSS定义的外框,但很多时候,加了边框后,图片要产生位移,影响整体效果,本例的三种方法,会让您明白,如何在加边框后不位移的方法。
引用:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>css实现鼠标悬停时图片加边框效果</title>
<style type="text/css">       
        body{background:#000;color:#06c;}
        em{ font-style:inherit;}
        img{background:white;margin:0 5px;width:275px;height:212px;}
        img:hover{border:1px red solid;}
        .demo1 img{border:5px solid transparent;}
        .demo2 img:hover{border:5px red solid;}
        .demo3 img:hover{width:270px;height:207px;border:5px solid yellow;}
        </style>

</head>
<body>
<div class="demo1">
                <img src="http://ps.missyuan.com/uploads/allimg/150502/1-1505021K5310-L.jpg" />       
                <em>明显看到当img标签在hover的时候由于出现边框导致位移</em>
        </div>
<div class="demo2">
                <img src="http://ps.missyuan.com/uploads/allimg/150502/1-1505021K5310-L.jpg" />       
                <em>给每个img添加border:1px solid transparent;世界就和平了</em>               
        </div>
<div class="demo3">
                <img src="http://ps.missyuan.com/uploads/allimg/150502/1-1505021K5310-L.jpg" />
                <em>修改width和height,世界继续和平</em>                               
        </div>
</body>
</html>

作者: shenxian2013    时间: 2015-5-4 23:11

引用:
img:hover{border:1px red solid;}
        .demo2 img{border:5px solid transparent;}
        .demo2 img:hover{border:5px red solid;}
        .demo3 img:hover{width:270px;height:207px;border:5px solid yellow;}
发现一处笔误 第一个demo2应该是demo1吧
作者: 爱你不要你    时间: 2015-5-8 14:46     标题: 回复 沙发 shenxian2013 的帖子

不好意思
作者: 奋斗的零九    时间: 2018-10-30 09:03

多谢分享!!!!
作者: tsr    时间: 2018-11-7 15:48


作者: 探索者2019    时间: 2019-4-9 10:15

原来大神的操作是这样的 ,加油




欢迎光临 思缘论坛 (http://www.missyuan.com/) Powered by Discuz! 6.0.0