我试图在悬停时隐藏一个文本，并仅使用html & css在其中显示另一个文本。

Question

我希望有人在“剧本”上方盘旋，看到“散文”，而“剧本”暂时消失。

但这就是看上去的样子

“播放”这个词在悬停时仍保留在背景中。

​

.prose {
  visibility: hidden;
  position: absolute;
}

.prose a {
  visibility: hidden;
  text-decoration: none;
  color: orange;
  position: absolute;
  z-index: 999;
}

.plays-title:hover {
  opacity: 0;
  cursor: cell;
}

.title:hover .prose {
  visibility: visible;
}

.title:hover .prose a {
  visibility: visible;
}

<h1 class="title" style="float:right;">
  <!--on hover-->
  <span class="prose"><a href="/prose">PROSE</a></span>
  <!--hover element end-->
  <span class="plays-title"> PLAYS </span>
</h1>

​

Answer 1

当悬停.title时，可以将..plays title不透明度设置为0。

.title:hover .plays-title {
    opacity: 0;
}