用CSS定义鼠标悬停图片时加边框效果

在实践中自己通过查阅资料总结出了用CSS给图标加边框的三种效果，在此做下记录，方便以后给和自己一样的小白们的使用，大神们可略过。。。

先看下三种效果的图示：

第一种，默认带1px边框，且边框与图片有3px间距，鼠标悬停图片时边框变红色

第二种，默认不带边框，鼠标悬停图片时，增加1px红色边框

第三种，默认不带边框，鼠标悬停图片时，增加1px红色边框并位移显示

三种不同的效果代码：
第一种：

<html>
<style type="text/css">
img:hover{border:1px red solid;}
.demo1 img:hover{border:1px red solid;}
.demo1 img{border:1px solid #cbcdcc; padding: 3px;}
</style>
<body>
<div class="demo1">
<img src="https://www.hmjblog.com/wp-content/uploads/2015/08/testcss.jpg" />
</div>
</body>
</html>

第二种：

<html>
<style type="text/css">
img:hover{border:1px red solid;}
.demo2 img:hover{border:1px red solid;}
.demo2 img{border:1px solid #cbcdcc;}
</style>
<body>
<div class="demo2">
<img src="https://www.hmjblog.com/wp-content/uploads/2015/08/testcss.jpg" />
</div>
</body>
</html>

第三种：

<html>
<style type="text/css">
img:hover{border:1px red solid;}
.demo3 img:hover{border:1px red solid;}
</style>
<body>
<div class="demo3">
<img src="https://www.hmjblog.com/wp-content/uploads/2015/08/testcss.jpg" />
</div>
</body>
</html>

原文链接：用CSS定义鼠标悬停图片时加边框效果，转载请注明来源！

2 条评论