图片链接在悬停时移动

Posted 2023-05-08

【中文标题】图片链接在悬停时移动

【英文标题】：Image link moves on hover

【发布时间】：2015-04-22 08:31:34

【问题描述】：

我正在修改一个 wordpress 网站的页脚以包含四个附属徽标及其相关的主页 URL。 每当图像悬停在上方时，图像容器就会缩小并将其下方的页面略微向上移动，同时将图像稍微向左移动。

网址：http://giant2.cogiva.com/

除了主题默认值之外，每个图像都有以下 CSS：

#image-9 a 
    outline: none;
    position: relative;


#image-9 a img 
    outline: none;
    position: relative;


#image-9 img 
    border: none;
    position: relative;

【问题讨论】：

删除img的填充，如果你想要空间，在元素上应用填充（或边距），不要忘记应用显示块或内联块。

【参考方案1】：

无悬停：a img padding: 4px

悬停时：a:hover img padding: 0

在style.css中，查找并替换，第681行：

a img        border:1px solid #dedede; padding:4px; 
a:hover img  border:5px solid #2d3e4f;