如何将悬停边框添加到IMG标记中的图像?
问题描述:
我想为图片添加一个悬停边框,但是我想要/需要在同一个标签内部完成,因为我在Wordpress中对其进行了操作,并且我不知道如何链接该类。如何将悬停边框添加到IMG标记中的图像?
换句话说,我需要在img标签内部的样式中做所有事情。
到目前为止,我发现的所有例子都是关于链接外部类的。
这是一个Wordpress页面内的btw。
答
编辑:只是重新读您的文章,实现你想要内嵌样式。如果您想要将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;
}
没有看到您的代码我不能太具体,希望这是一些帮助。
答
您不能在html标签内使用伪类; 我认为这是不推荐,但如果你有,你可以使用JS
<img onmouseover="this.style.border = '1px solid #123456'" onmouseout="this.style.border = '0px'" src="yourImg.png">
答
<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个像素的图像周围,所以我们可以改变悬停时的背景颜色。
- 鼠标悬停:更改填充空间的背景颜色。
- 鼠标:当光标离开图像时,再次更改bg颜色。
- 边框半径:围绕悬停边框的角落。
El Magnifico是对的。您不能使用伪类或css:hover内联。
您可以将背景颜色更改为与您的主题相符的任何内容,或者将其完全删除。您可以更改填充。只要确保为图像指定至少1px的固定填充大小,这应该工作。使用鼠标事件添加和删除css:边框可能会导致图像移动。这就是为什么我建议你添加填充和改变背景颜色,而不是添加边框。
我测试了这个。请让我知道这对你有没有用。