如何为 IMG 标签内的图像添加悬停边框？答案

【问题标题】：How to add a hover border to an image inside the IMG tag?如何为 IMG 标签内的图像添加悬停边框？
【发布时间】：2016-02-02 23:58:12
【问题描述】：

我想为图像添加悬停边框，但我想/需要在同一个标签内进行，因为我在 Wordpress 中使用它，我不知道如何链接该类。

也就是说，我需要在img标签内的样式内做所有事情。

到目前为止，我发现的所有示例都是关于链接外部类的。

顺便说一句，这是在 Wordpress 页面内。

【问题讨论】：

标签： html css wordpress hover border

【解决方案1】：

编辑：只需重新阅读您的帖子并意识到您需要内联样式。如果您想在页面中添加 CSS 并使用类，请在您的 Wordpress 主题中查找 style.css 文件。

如果您以课堂方式进行，以下是示例：

要让边框出现在图像内部而不是外部，您可以尝试 box-sizing:border-box

img {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

img:hover {
    border: 20px solid red;
}

如果这不起作用，您可以为图像添加一个边框以融入背景。因此，例如，如果您有白色背景，请为图像添加 5 像素的白色边框，然后在悬停时更改颜色。

img {
    border: 20px solid white;
}

img:hover {
    border-color: red;
}

没有看到你的代码，我不能太具体，希望这会有所帮助。

【讨论】：

【解决方案2】：

你不能在 html 标签中使用伪类；我认为不建议这样做，但如果你必须使用 JS 可以使用 JS

<img onmouseover="this.style.border = '1px solid #123456'" onmouseout="this.style.border = '0px'" src="yourImg.png">

【讨论】：

【解决方案3】：

<img src="your-image-file-path-here.jpg" style="padding:5px;border-radius:7px;" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'" />

这里应用了四种关键样式：

填充，在图像周围保留 5 个像素宽的背景区域，因此我们可以在悬停时更改背景颜色。
鼠标悬停：更改填充空间的背景颜色。
Mouseout：当光标从图像上移开时，背景颜色会再次变回。
Border-radius：圆滑悬停边框的角。

El Magnifico 是对的。您不能使用伪类或 css:hover inline。

您可以将背景颜色更改为与您的主题相匹配的任何颜色或将其完全删除。您可以更改填充。只要确保为图像指定至少 1px 的固定填充大小，这应该可以工作。使用鼠标事件添加和删除 css:border 可能会导致图像移动。这就是为什么我建议您添加填充并更改背景颜色而不是添加边框。

我对此进行了测试。让我知道它是否适合你。

【讨论】：