html - 在 div :hover 上更改 span 的不透明度

Question

我想更改 span 的不透明度在 a 内当div所有这些都在盘旋中。

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{
  border:1px solid black;
}
.hover-text{
  opacity: 0;
  font-size:30px;
}
.about:hover .hover-text {
  opacity: 1;
}

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