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

前端之家收集整理的这篇文章主要介绍了html – 悬停时图像移动 – 边框问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
以下是代码

HTML

  1. <div class="fgimg">
  2. </div>

CSS

  1. .fgimg {
  2. width: 200px;
  3. height: 200px;
  4. -webkit-border-radius: 150px;
  5. -moz-border-radius: 150px;
  6. background: url('https://c1.staticflickr.com/3/2669/5830411257_b21bf9e931_b.jpg') no-repeat;
  7. margin-left:30%;
  8. margin-top:10px;
  9. background-position: center center;
  10. }
  11. .fgimg:hover {
  12. cursor:pointer;
  13. border-radius: 210px;
  14. border-color:#226fa3;
  15. border:outset;
  16. -webkit-border-radius: 150px;
  17. -moz-border-radius: 150px;

}

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

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

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

可能是什么问题呢 ?

解决方法

您可以在正常状态下在图像上设置不可见的边框:
  1. border: 3px outset transparent;

或者您可以申请:

  1. Box-sizing: border-Box;

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

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

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

猜你在找的HTML相关文章