有关在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>
希望对您有帮助
元素之间的空间寻找孩子。尝试使用逗号而不是空格。
您不能将鼠标悬停在未显示的内容上。您可以改用不透明度或可见性。
li.invisibleLi { opacity: 0 }
ul li.visibleLi:hover ~ li.invisibleLi{ opacity: 1 }