CSS - 悬停一个元素，改变另一个元素的可见性

标签 css

HTML如下

<ul id="master">
 <li class="has-sub">Item</li>
   <ul class="sub">
    <li>Sub One</li>
   </ul>
 </li>
</ul>

CSS 是

.sub { visibility: hidden; }
#master .has-sub:hover > .sub { visibility: visible;}

我几乎从一个可行的网站上采用了这种方法，但在我的冒险中，英雄失败了。很糟糕。我做错了什么？

最佳答案

您的 HTML 无效...您已关闭 <li class="has-sub">Item</li > 太快了。

.sub {
    visibility: hidden;
}
#master .has-sub:hover > .sub {
    visibility: visible;
}

<ul id="master">
    <li class="has-sub">Item
        <ul class="sub">
            <li>Sub One</li>
        </ul>
    </li>
</ul>

关于CSS - 悬停一个元素，改变另一个元素的可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26443955/

相关文章：

PHP 邮件内容不显示在 Outlook 中