CSS - 將鼠標懸停一個元素，在另一

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>太快。

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

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