html - :link not working in hover 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;
}

div my_account 在 account 类悬停时不可见>).但是，如果我从 div login 中删除 a:link，悬停会起作用。

我想不出问题所在。

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>

正如 Muhammad Usman 在他的评论中提到的那样，您不应该真正将 a 元素嵌套在 a 元素中......如您所见，我已经将要显示的隐藏 div 移动到第一个 a 元素之外，并在将鼠标悬停在第一个 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>