CSS：悬停显示块无法正常工作

Question

对于跟踪html上的html li.visibleLi 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; }

但它不起作用。任何人都可以纠正我吗？

请帮忙， 感谢。

Answer 1

你试试这个 -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它会帮助你

Answer 2

元素之间的空间寻找孩子。尝试使用逗号而不仅仅是空格。

Answer 3

您不能将鼠标悬停在未显示的内容上。您可以改用不透明度或可见性。

li.invisibleLi { opacity: 0 }
ul li.visibleLi:hover ~ li.invisibleLi{ opacity: 1 }