首页 » 网络应用 » 用CSS定义鼠标悬停图片时加边框效果

用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="http://www.heminjie.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="http://www.heminjie.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="http://www.heminjie.com/wp-content/uploads/2015/08/testcss.jpg" />
</div>
</body>
</html>

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

0