Html 使用CSS更改多层图像的颜色

我正在尝试创建以下功能：

• 在一个
  的内部，有两个透明图像层叠在一起；一个是对象，另一个图像表示对象周围的“辉光”
• 悬停时，我希望光晕更改颜色，但不希望原始对象更改颜色

以下是我现有的设置：

HTML:

我已经创建了一个生活在

中的星座的图像；这应该始终保持白色

在一个单独的

中，我有一个“光环”的图像；此图像使用

混合模式

将图像与悬停时的颜色相乘

不幸的是，我现在使用的方法是将两个图像乘以相同的颜色，即使它们在不同的元素中！我这里有一个活生生的例子：我这里有一个例子：

我怎样才能得到我想要的行为呢？

问题在于，星座：after位于你的图像上方。为图像设置更高的z索引，并将触发器悬停在父图像上

#container {
  position: relative;
  background: black;
  width: 800px;
  height: 250px;
}

img {
   position: relative;
   z-index: 2;
}

#constellation {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 250px;
  background: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}

#constellation:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: red;
  mix-blend-mode: multiply;
  opacity: 0;
}

#container:hover #constellation:after {
  opacity: 1;
}

请参见此处的示例：

#container {
  position: relative;
  background: black;
  width: 800px;
  height: 250px;
}

#constellation {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 250px;
  background-image: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}

#constellation:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #4E6F2E;
  mix-blend-mode: multiply;
  opacity: 0;
}

#constellation:hover:after {
  opacity: 1;
}

#container {
  position: relative;
  background: black;
  width: 800px;
  height: 250px;
}

img {
   position: relative;
   z-index: 2;
}

#constellation {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 250px;
  background: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}

#constellation:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: red;
  mix-blend-mode: multiply;
  opacity: 0;
}

#container:hover #constellation:after {
  opacity: 1;
}