Question

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

换句话说，我需要在img标签内的样式内做所有事情。

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

这是一个Wordpress页面。

Answer 1

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

以下是以类方式进行的示例：

要让边框显示在图像内而不是外部，您可以尝试框大小调整：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 2

您不能在html标记内使用伪类; 我认为这不推荐，但如果必须，可以使用JS

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

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

这里有四种关键风格：

填充，在图像周围保留五个像素宽的背景区域，因此我们可以在悬停时更改背景颜色。
鼠标悬停：更改填充空间的背景颜色。
Mouseout：当光标离开图像时，再次更改bg颜色。
Border-radius：围绕悬停边框的角落。

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

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

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

如何在IMG标记内的图像中添加悬停边框？

3 个答案: