找了半天鼠标浮动到图片添加边框样式，终于找到合适的了

最新推荐文章于 2022-04-26 15:47:38 发布

dong342492715

最新推荐文章于 2022-04-26 15:47:38 发布

阅读量463

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript HTML 文章标签： html css 图片加边框超链接图片

本文链接：https://blog.youkuaiyun.com/dong342492715/article/details/84373602

javascript 同时被 2 个专栏收录

17 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

今天页面上需要，就一直在网上找关于浮动加边框的样式，一直没有合适的，要不就是不显示，要不就是图片移动了，特意找了一个保存起来，以后的时候直接调用。


<!DOCTYPE HTML>
<html>
<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="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<em>明显看到当img标签在hover的时候由于出现边框导致位移</em>
</div>
<div class="demo2">
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<em>给每个img添加border:1px solid transparent;世界就和平了</em>
</div>
<div class="demo3">
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<img src="zhuanti.jpg" />
<em>修改width和height,世界继续和平</em>
</div>
</body>
</html>