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

Question

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

换句话说，我需要在 img 标签内的样式内完成所有操作。

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

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

Answer 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;
}

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

img {
    border: 20px solid white;
}

img:hover {
    border-color: red;
}

没有看到您的代码，我不能说得太具体，希望这对您有所帮助。