<分区>
<分区>
我有 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>
<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>
<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; }
我需要使用什么正确的 css 方法来使它们在悬停时保持在原位？
最佳答案
给非悬停状态一个透明边框:
a.round {
border: 5px solid transparent;
display: inline-block;
position: static;
cursor: pointer;
}
另请注意，您可能希望给图像一个 vertical-align:top;规则以消除它们下方的间隙。并且请不要使用 <center>元素。
关于html - 边框悬停后如何停止图像移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36184650/