CSS a：悬停图像边框

Posted 2023-03-06

技术标签:

【中文标题】CSS a：悬停图像边框【英文标题】：CSS a:hover image borders 【发布时间】：2011-05-10 15:37:08 【问题描述】：

我在表格中有一堆链接的图像，并带有一些填充。当我尝试添加 img:hover 或 a:hover 边框属性时，当边框出现时，所有内容都会移动边框较厚的像素数量。有没有办法阻止这种行为？

【问题讨论】：

【参考方案1】：

img 
    border: solid 10px transparent;

img:hover 
    border-color: green;

【讨论】：

【参考方案2】：

img:hover 
  border: solid 2px red;
  margin: -2px;

似乎对我有用（Safari 6.0.5）。由于边框是在 img 的“内部”绘制的，因此没有添加空间。

【讨论】：

【参考方案3】：

问题是您要为占用空间的元素添加边框 - 页面上的其他元素必须移动以腾出空间。

解决方案是添加与背景匹配的边框，然后在悬停时更改颜色或样式。另一种可能性是使框比您最初的预期更大，然后调整它的大小以适合您添加的边框。

【讨论】：

以上是关于CSS a：悬停图像边框的主要内容，如果未能解决你的问题，请参考以下文章