Question

我有一颗白星和一张图像。每当图像悬停时，我都会更改不透明度，但是我不明白为什么我的星星消失了。

运行以下示例，将鼠标悬停在图像上，然后进行检查。不透明效果只是在图像中，为什么让我的白星消失了？

figure {
  position: relative;
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

icon-star {
  position: absolute;
  font-size: 50px;
  color: white;
}

img {
  max-width: 220px;
  max-height: 150px;
}

img:hover {
  opacity: .7;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

<figure>
  <icon-star>?</icon-star>
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg" alt="Elephant at sunset">
  <figcaption>An elephant at sunset</figcaption>
</figure>

Answer 1

向星标添加z-index，它应该可以工作。

figure {
    position: relative;
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}

icon-star {
    position: absolute;
    font-size: 50px;
    color: white;
    z-index: 1;
}

img {
    max-width: 220px;
    max-height: 150px;
}

img:hover {
    opacity: .7;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}

<figure>
    <icon-star>?</icon-star>
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

如何更改不透明度而不影响其他HTML元素？

1 个答案: