html - 使文本出现在悬停时

Question

当我将鼠标悬停在不同的东西上时，我试图让一个文本框出现。在我的代码中:我想将鼠标悬停在 h1 block 上并显示 h3 block 。

h1.title {
  font-size: 100px;
  background: url(https://upload.wikimedia.org/wikipedia/commons/f/f3/Orion_Nebula_-_Hubble_2006_mosaic_18000.jpg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 5.6s ease, 3s transform;
}

h1.title:hover {
  background-position: left;
  transform: translateX(150px) /* Where the .ps would appear */
}

.ps {
  visibility: hidden;
}

<div class="title">
  <h1 class="title">Random Thing</h1>
  <h3 class="ps">Playing around in HTML!</h3>
</div>

Answer 1

您可以使用相邻兄弟组合器 +: https://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators

h1.title:hover + .ps {
  visibility: visible;
}