利发国际lifa222 » 网络应用 » 用CSS定义鼠标悬停图片时加边框效果

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

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

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

lifa222

百度360搜索搜狗搜索

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

lifa222

百度360搜索搜狗搜索

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

lifa222

百度360搜索搜狗搜索
三种不同的效果代码:
第一种:
<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