一個：鏈接懸停DIV不工作

Question

HTML

<li class="account"> 
     <a href="">My Account       
      <div id="my_account"> 
       <div id="user_pic"><img src=""></div> 
       <div id="login"><a href="">Login</a></div> 
       <div id="register">Register</div> 
      </div> 
     </a> 
    </li> 

CSS

#my_account{ 
    display: none; 
} 
.account a:hover #my_account{ 
    width: 200px; 
    display: block; 
    position: absolute; 
    z-index: 999; 
} 

格my_account的不上類賬號如果任何一個的懸停可見：鏈接被添加在同一個div中（如上面的div 登錄）。但懸停作品，如果我刪除：鏈接從div 登錄。

我找不出這個問題。

Answer 1

我會重寫你的標記如下：

#my_account{ 
 
    display: none; 
 
} 
 
.account > a { 
 
    display: block; 
 
    padding: 0 20px 20px 0; 
 
    position: relative; 
 
} 
 
.account a:hover + #my_account, #my_account:hover { 
 
    width: 200px; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 999; 
 
    top: 30px; 
 
}

<li class="account"> 
 
    <a href="">My Account</a>       
 
    <div id="my_account"> 
 
     <div id="user_pic"><img src=""></div> 
 
     <div id="login"><a href="">Login</a></div> 
 
     <div id="register">Register</div> 
 
    </div> 
 
</li>

正如穆罕默德奧斯曼在他的評論提到，你真的不應該嵌套一個a元素中的a元素...正如你所看到的，我將第一個a元素以外的隱藏div移動到了第一個a元素的上方，並且使用兄弟選擇器來定位它。

如果你真的必須保持與當前的標記，你就不能改:hover狀態的位置到.account類本身如下：

#my_account{ 
 
    display: none; 
 
} 
 
.account > a { 
 
    display: block; 
 
} 
 
.account:hover #my_account{ 
 
    width: 200px; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 999; 
 
}

<li class="account"> 
 
     <a href="">My Account       
 
      <div id="my_account"> 
 
       <div id="user_pic"><img src=""></div> 
 
       <div id="login"><a href="">Login</a></div> 
 
       <div id="register">Register</div> 
 
      </div> 
 
     </a> 
 
    </li>