html - 更改 :hover – what other ways are there? 上图标图像的颜色

Question

我有以下问题，它让我抓狂:

基本上我有一个带背景的 div 容器。当我悬停它时，这个背景应该会改变(见图)。它是一个 png 而不是白色，它应该变成红色。

到目前为止我做了什么:

首先:CSS Sprite

认为这将是最好的解决方案，但因为 div 改变了它的大小(响应式)并且图标没有固定大小所以它不是很干净:我在悬停时有一个小的偏移。不知道为什么……也许这可以解决……

第二个:2 张单独的图片

但在这种情况下这不是一个选项，因为我需要使用内联样式。 :hover ist 不可用作内联样式。

第三:试过mask-box-image

这是一个很棒的解决方案……但是 Firefox 不支持它。

有没有人知道如何解决它？

Answer 1

试一试

CSS

.icon-cont{
  height:300px;
  width:300px;
  background-color: #ff0000;
  text-align:center;
}
.icon-cont:hover{
  background-color: transparent;
}
.icon-cont:hover .icon,
.icon-cont:hover .icon::before,
.icon-cont:hover .icon::after
{
  border-color:#ff0000;
}
.icon{
  height:0px;
  border-bottom:2px solid #fff;
  width:60%;
  line-height:300px;
  position: relative;
  margin:auto;
  top:50%;
}
.icon::before{
  content:"";
  position: absolute;
  top:0;
  bottom: 0;
  left:-30px;
  margin:auto;
  height:20px;
  width:20px;
  border:2px solid #fff;
  border-radius:50px;
}

.icon::after{
  content:"";
  position: absolute;
  top:0;
  bottom: 0;
  right:-30px;
  margin:auto;
  height:20px;
  width:20px;
  border:2px solid #fff;
  border-radius:50px;
}

HTML

<div class="icon-cont">
  <div class="icon"></div>
</div>

Link for reference

希望这对您有帮助..