更改图标图像的颜色：悬停 - 还有其他方法吗？

Question

我有以下问题，它让我发疯：

基本上我有一个带背景的div容器。当我将鼠标悬停时，此背景应该会改变（参见pichture）。它是一个png而不是白色它应该变成红色。

到目前为止我做了什么：

首先：CSS精灵

认为这将是最好的解决方案但是因为div改变了它的大小（响应）并且图标没有固定的大小它不是很干净：我在悬停时有一个小偏移。不知道为什么...... mybe这可以修复......

第二：2张单独的图像

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

Thrid：尝试了mask-box-image

是一个很好的解决方案......但Firefox并不支持它。

有没有人有另一个想法如何解决它？

Answer 1

可能会有所帮助

我在

之后发布了一个例子

＆＃13;

＆＃13;

.box {
  padding: 20px;
  display: inline-block;
  background:tomato;
}

.box:hover {
  background: transparent;
}

.box:hover span {
  color: tomato;
}

.box span {
  display: inline-block;
  color: #fff;
}

＆＃13;

<div class="box">
  <span>a</span>
  <span>----</span>
  <span>b</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试一下

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

希望这会有所帮助..

Answer 3

你不能用css改变.png的颜色。我认为你应该用你的图标制作一个字体，以便以后用css改变颜色。

我自己还没有这样做，但我知道那些字体，比如字体很棒可以改变颜色。谷歌中有一些自动生成器可以制作自己的字体。

试试这个。