html - CSS:在悬停显示块上不起作用

要在悬停li.visibleLi li.invisibleLi时显示以下html，需要显示。

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

希望对你有帮助