display:inline-块；和 display:none；不适用于用悬停替换文本

Question

为了方便起见，我一直在开发一个充满游戏的小网站，我试图在鼠标悬停在链接上时显示一条小消息。我的 html 代码在 html 中看起来像这样：

<li><a href="game1.html"><span class="games">Text normally</span><span class="hovergames">Text displayed on hover.</span></a></li>

而在style.css中的代码如下：

.hovergames{background-color:#242423; a:hover.games{display:none;} a:hover.hovergames{display:inline-block;} a.hovergames{display:none;}

我的目标是尝试让 "text displayed on hover" 出现在悬停时而不是 "text normally"，但这是行不通的。有什么我可以做的，所以文本不会同时显示两者吗？

Answer 1

.hovergames {
  display: none;
}

a:hover .hovergames {
  display: block;
}

a:hover .games {
  display: none;
}

a {
  display: inline-block;
}

<li><a href="game1.html"><span class="games">Text normally</span><span class="hovergames">Text displayed on hover.</span></a></li>

display:inline-block; and display:none; Not working for replacing text with hover