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

Question

HTML的格式如下：

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

CSS is

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

我基本上参考了一个能够完成这个功能的网站，但在我的尝试中英雄失败了。非常惨痛的失败。我做错了什么？

- NotaGuruAtAll

---

你能分享一下他们正在使用的网站吗？ - crazymatt

Answer 1

您的HTML代码存在错误，您提前关闭了

项目

。请注意修改代码。

.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>

- Paulie_D

Answer 2

首先，您的HTML无效，请修复它。 然后尝试这个： 将您的HTML更改为

。

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

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

演示

- Harutyun Abgaryan