Question

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;}

我几乎从一个有效的网站上采取了这种方法，但在我的冒险中，英雄失败了。厉害。我做错了什么？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

DEMO

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

2 个答案: