html - CSS:悬停显示 block 不起作用

对于悬停在 li.visibleLi 上的以下 html，需要显示 li.invisibleLi。

<ul>
  <li class="visibleLi">Web Design</li>
  <li class="invisibleLi">Web Development</li>
  <li class="invisibleLi">Illustrations</li>
</ul>

我尝试了以下CSS:

li.invisibleLi { display: none; }
li.visibleLi:hover li.invisibleLi{ display: block; }

但它不起作用..有人可以纠正我吗？

请帮忙，谢谢。

最佳答案

你试试这样-

    ul li.invisibleLi { display: none; }
    ul li.visibleLi:hover ~ li.invisibleLi{ display: block; }

<ul>
  <li class="visibleLi">Web Design</li>
  <li class="invisibleLi">Web Development</li>
  <li class="invisibleLi">Illustrations</li>
</ul>

希望对你有帮助

关于html - CSS:悬停显示 block 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29553780/

相关文章：

php - Wordpress 上的特色帖子部分不会显示