本文主要是介绍CSS鼠标悬停图片加边框效果，不位移的方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE HTML>
<html lang="en-US">
<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="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /> <em>明显看到当img标签在hover的时候由于出现边框导致位移</em></div>
<div class="demo2"><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /> <em>给每个img添加border:1px solid transparent;世界就和平了</em> </div>
<div class="demo3"><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><img src="/jscss/demoimg/wall_s6.jpg" /><em>修改width和height,世界继续和平</em> </div>
</body>
</html>这篇关于CSS鼠标悬停图片加边框效果，不位移的方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
