CSS：悬停显示块不起作用答案

【问题标题】：CSS: On hover display block not workingCSS：悬停显示块不起作用
【发布时间】：2015-04-10 05:03:30
【问题描述】：

对于在悬停的 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; }

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

请帮忙，谢谢。

【问题讨论】：

【解决方案1】：

你试试这样-

    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>

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：