Question

我有一个透明背景图片的跨度：

<span style="background: url(icon1.png) no-repeat left center;"></span>

悬停时，我想要更改背景图像，为此我创建了一个悬停效果：

.style1:hover {
  background: url(icon2.png);
  background-repeat: no-repeat;
}

它的工作方式是新图像位于顶部，但如果它是透明的，您仍然可以看到下面的旧图像。

＆＃13;

.style1:hover {
  background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/3777-200.png);
  background-repeat: no-repeat;
  background-size: 25px;
}

＆＃13;

<div class="style1">
    <span style=" background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/66460-200.png) no-repeat left center;background-size:25px 25px;padding-left: 50px;"></span>
  </div>

＆＃13;

对此有什么简单的解决方法吗？

非常感谢

大卫

Answer 1

您需要定位span add use !important以覆盖内联样式。

.style1:hover span {
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/3777-200.png)!important;
  background-repeat: no-repeat;
  background-size: 25px;
}

<div class="style1">
  <span style=" background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/66460-200.png) no-repeat left center;background-size:25px 25px;padding-left: 50px;"></span>
</div>

如何交换透明背景图片

1 个答案: