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

Question

我想为图片添加一个悬停边框，但是我想要/需要在同一个标​​签内部完成，因为我在Wordpress中对其进行了操作，并且我不知道如何链接该类。

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

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

这是一个Wordpress页面内的btw。

Answer 1

编辑：只是重新读您的文章，实现你想要内嵌样式。如果您想要将CSS添加到您的页面并使用某个类，请在Wordpress主题中查找style.css文件。

这里的例子，如果你做的类方式：

要让边界出现在图像内而不是外面，你可以尝试盒大小：边界盒

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

这里有应用四个关键款式：

1. 填充，保持一个背景区宽5个像素的图像周围，所以我们可以改变悬停时的背景颜色。
2. 鼠标悬停：更改填充空间的背景颜色。
3. 鼠标：当光标离开图像时，再次更改bg颜色。
4. 边框半径：围绕悬停边框的角落。

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

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

我测试了这个。请让我知道这对你有没有用。