Html CSS:悬停显示块不工作

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

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

但是它不起作用。。有人能纠正我吗

请帮忙，

---

谢谢。

元素之间的空间用于查找儿童。尝试用逗号而不是空格。

您可以这样尝试-

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

网页设计
网站开发
插图

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

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

---

不要用空格分隔，还应该添加逗号：

li.visibleLi:hover，li.invisibleLi{display:block；}

当我添加逗号时，所有li在加载时都是可见的。

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