Question

我有3张图像，我通过css编码，有边框悬停。它简单而美观，但悬停时图像会继续移动。

http://coreneto.com/rental/static/dist/img/cam.jpg http://coreneto.com/rental/static/dist/img/car.jpg http://coreneto.com/rental/static/dist/img/phone.jpg

现在是直播： JSfiddle

以下是代码：

<center>
  <a class="round" href="http://coreneto.com/rental/cars"><img src="http://coreneto.com/rental/static/dist/img/cam.jpg" width="200" height="200"></a>&nbsp;&nbsp;
  <a class="round" href="http://coreneto.com/rental/cars"><img src="http://coreneto.com/rental/static/dist/img/car.jpg" width="200" height="200"></a>&nbsp;&nbsp;
  <a class="round" href="http://coreneto.com/rental/tickets"><img src="http://coreneto.com/rental/static/dist/img/phone.jpg" width="200" height="200"></a>
</center>

这是css：

a.round:hover {border: 5px solid #005FD0; display: inline-block; position: static;
    cursor: pointer;  }

hovring时，我需要使用哪种正确的css方法来保持它们的位置？

Answer 1

为非悬停状态提供透明边框：

a.round {
    border: 5px solid transparent;
    display: inline-block;
    position: static;
    cursor: pointer;
}

<强> jsFiddle example

另请注意，您可能希望为图片指定vertical-align:top;规则，以消除其下方的间隙。请不要使用<center>元素。

Answer 2

您可以使用box-shadow：

img:hover {
  -webkit-box-shadow: 0px 0px 0px 5px #005FD0;
  -moz-box-shadow: 0px 0px 0px 5px #005FD0;
  box-shadow: 0px 0px 0px 5px #005FD0;
}

<center>
  <a class="round" href="http://coreneto.com/rental/cars">
    <img src="http://coreneto.com/rental/static/dist/img/cam.jpg" width="200" height="200">
  </a>&nbsp;&nbsp;
  <a class="round" href="http://coreneto.com/rental/cars">
    <img src="http://coreneto.com/rental/static/dist/img/car.jpg" width="200" height="200">
  </a>&nbsp;&nbsp;
  <a class="round" href="http://coreneto.com/rental/tickets">
    <img src="http://coreneto.com/rental/static/dist/img/phone.jpg" width="200" height="200">
  </a>
</center>

Answer 3

选项是为原始边框提供透明边框：

border: 5px solid transparent;

编辑：有人在我面前。遗憾

Answer 4

我花了一些时间，但现在是：

住在这里： JSfiddle

<center>
<a class="round" href="http://coreneto.com/rental/cars">
<div class="banner">
</div>
</a>
<a class="round" href="http://coreneto.com/rental/cars">
<div class="banner1">
</div></a>
<a class="round" href="http://coreneto.com/rental/cars">
<div class="banner2">
</div>
</a>
</center>

和

a {decoration:none}

 div:hover{border: 5px solid #005FD0;}

 .banner , .banner1, .banner2 {
  cursor: pointer;
  display: inline-block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 200px; 
  height: 200px; 
  padding-left: 20px;
  } 

.banner {background: url(http://coreneto.com/rental/static/dist/img/cam.jpg) no-repeat center center;}

.banner1 {background: url(http://coreneto.com/rental/static/dist/img/car.jpg) no-repeat center center;}

.banner2 {background: url(http://coreneto.com/rental/static/dist/img/phone.jpg) no-repeat center center;}

边框悬停后如何停止图像移动？

4 个答案: