在 div:hover 中更改跨度的不透明度

Question

当所有这些都被悬停时，我想改变一个span内的不透明度。adiv

HTML：

<div id="about">
  <a style="text-decoration: none;" href="/about"><h1>ABOUT ME</h1><br><span class="hover-text">test</span></a>
</div>

CSS：

.hover-text {
  opacity: 0;
}

#about:hover {
  change .hover-text opacity to 1
}

这可能与纯 CSS 有关吗？

Answer 1

它只适用于子元素。

例如.about 类有子级跨度那么它会起作用

.about:hover .hover-text {
  opacity: 0;
}

.about:hover .hover-text {
  opacity: 0;
}

.about{
  border:1px solid black;
}
.hover-text{
  opacity: 0;
  font-size:30px;
}
.about:hover .hover-text {
  opacity: 1;
}