html – 悬停时图像移动 – 边框问题

概述以下是代码 HTML <div class="fgimg"></div> CSS .fgimg {width: 200px;height: 200px;-webkit-border-radius: 150px;-moz-border-radius: 150px;background: url('https://c1.staticflickr.com/3/2669/5830411257_ 以下是代码

HTML

<div ></div>

CSS

.fgimg {wIDth: 200px;height: 200px;-webkit-border-radius: 150px;-moz-border-radius: 150px;background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;margin-left:30%;margin-top:10px;background-position: center center;}.fgimg:hover {cursor:pointer;border-radius: 210px;border-color:#226fa3;border:outset;-webkit-border-radius: 150px;-moz-border-radius: 150px;

}

这是演示：
http://jsfiddle.net/sathish_opr/03kkqywy/1/

当我们将鼠标悬停在图像上时,图像位置会发生变化.

我希望在悬停时看到图像的边框颜色,但图像位置会自动更改:(

可能是什么问题呢 ？

解决方法 您可以在正常状态下在图像上设置不可见的边框：

border: 3px outset transparent;

或者您可以申请：

Box-sizing: border-Box;

这样,边界计算为宽度和高度的内部. (例如200px宽度)

演示时间：
http://jsfiddle.net/03kkqywy/4/

BTW：你不再需要在border-radius上添加任何前缀.但是,如果你这样做,总是将非前缀属性作为最后一个属性.

总结

以上是内存溢出为你收集整理的html – 悬停时图像移动 – 边框问题全部内容，希望文章能够帮你解决html – 悬停时图像移动 – 边框问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。