上一篇: azure-application-insight – 在... 下一篇:html – 在Android中呈现格式化文...

html – 如何在悬停时更改图像的颜色

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 如何在悬停时更改图像的颜色，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我需要更改图像的背景颜色.图像是带有白色背景的圆形图像,当您将鼠标悬停在图像上时,我需要将圆形图像的背景更改为蓝色.我只需要改变圆圈.

我的HTML代码是

<div class="fb-icon">
<a href="http://www.facebook.com/mypage" target="_blank">
<img src="images/fb_normal.png" alt="Facebook">
</a>
</div>

在CSS中我写道：

.fb-icon:hover {
    BACkground: blue;
}

上面的代码给我蓝色,但作为圆圈图标周围的框架.我需要的是改变圆圈本身的背景.想象一下,当你用鼠标悬停它时,它就像一个信号它是白色的.

如果可以通过CSS或其他方式完成,我需要一个解决方案.对不起,如果我做得太久了.

问题：link

解决方法

理想情况下,您应该使用透明的PNG,圆圈为白色,图像背景透明.然后,您可以在悬停时将.fb图标的背景颜色设置为蓝色.所以你的CSS将是：

fb-icon{
    BACkground:none;
}

fb-icon:hover{
    BACkground:#0000ff;
}

此外,如果您不想使用PNG,您还可以使用精灵并改变背景位置.精灵是一个大图像,带有一组较小的图像,可以通过改变背景位置作为背景图像.因此,例如,如果您的原始圆形图像具有白色背景为100px X 100px,则可以将图像的高度增加到100px X 200px,使得上半部分是具有白色背景的原始图像,而下半部分是蓝色背景的新图像.然后将CSS设置为：

fb-icon{
    BACkground:url('path/to/image/image.png') no-repeat 0 0;
}

fb-icon:hover{
    BACkground:url('path/to/image/image.png') no-repeat 0 -100px;
}