Question

当我遇到即使谷歌无法解决的问题（不是一个好兆头）时，我只是为了好玩而制作随机HTML的东西。当我在不同的地方盘旋时，我试图让文本框出现。我在google上看到了很多这样做的东西，但是暗示你没有其他代码用于你正在盘旋的对象，这意味着它唯一会做的就是让文本显示出来，所以动画（尽管这并没有＆＃39;或者工作，我在标题上有动画，这将是悬停在上面。这是我的代码：

在我的代码中：我想将鼠标悬停在h1块上并显示h3块。
的 HTML：

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
</head>

<body style="font-family:'Myriad Pro' ">
<div class="title">
    <h1 class="title">Random Thing</h1>
    <h3 class="ps">Playing around in HTML!</h3>
</div>
</body>

</html>

CSS：

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

就个人而言，我认为其他人会有这个问题。

感谢您的时间， Orion31

Answer 1

您可以使用相邻的兄弟组合+： here

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

Answer 2

首先，css中的注释是由

完成的

/* text */

你的问题的答案：

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

请勿使用可见性样式，因为在我使用它之前它不起作用。显示更为常见。

希望这有效！

CSS：在悬停时显示文本

2 个答案: