使文本出现在悬停时

Question

当我将鼠标悬停在不同的东西上时，我试图让一个文本框出现。

 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;
}

Answer 2

首先，css中的注释是由

/* text */

您问题的答案：

h1.title:hover + .ps {
  display: block;
}

不要使用可见性样式，因为当我使用它之前，它是行不通的。 而且显示更为普遍。

希望这有效！

Answer 3

你也可以使用

h1.title:hover + #ps {
opacity: 1;
}

有时我在编写表示具有 id 的元素的代码时不能使用点。