使用CSS更改悬停时图像的一部分[关闭]

Question

关闭。这个问题需要更多focused。它当前不接受答案。

---

是否要改善此问题？更新问题，使其仅按editing this post专注于一个问题。

关闭17秒前。

我有下面显示的图像

我只想显示我使用clip的不活跃社交媒体图标的图像的后半部分，当我将鼠标悬停在显示不活跃图标的那部分时，所悬停的图标必须像初始图片中的上方那样填充颜色。

我只想使用CSS来做到这一点，我考虑过检查光标在条形上的位置，然后从图像的上半部分取相同的区域，但是我不知道该怎么做，我想我需要首先确定每个图标的坐标，但我认为必须有一种更简单的方法。

Answer 1

最后，最好将图像分解，特别是如果您想找到一个纯CSS解决方案。

[您所要做的就是更改每个徽标悬停时的背景图像。

div {
  width: 200px;
  height: 200px;
}

.not-filled {
  background-image: url(https://www.placecage.com/g/200/200);
}

.not-filled:hover {
  background-image: url( https://www.placecage.com/200/200);
}

<div class="not-filled" />
<div class="color-filled" />

---

如果需要更复杂的东西，则可以使用相同的基本原理，也可以对display上的元素的#div1:hover ~ #div2属性进行类似操作。