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

Question

我想为图像添加悬停边框，但我 want/need 是在同一个标签内完成的，因为我在 Wordpress 中使用它，但我不知道如何 link class.

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

到目前为止，我找到的所有示例都是关于 linking 外部 classes.

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

Answer 1

您不能在 html 标签内使用伪 class；我认为不推荐这样做，但如果你必须这样做，你可以使用 JS

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

Answer 2

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

如果您以 class 方式执行此操作，则示例如下：

要使边框出现在图像内部而不是外部，您可以尝试 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;
}

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

Answer 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'" />

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

填充，使图像周围的背景区域保持五个像素宽，因此我们可以在悬停时更改背景颜色。
鼠标悬停：更改填充的背景颜色space。
Mouseout：当光标移出图像时，背景颜色再次变回。
border-radius：将悬停边框的角圆化。

El Magnifico 是对的。您不能使用伪 class 或 css:hover 内联。

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

我测试过这个。让我知道它是否适合你。

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

How to add a hover border to an image inside the IMG tag?

html

css

wordpress

border

hover