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 在帐户的鼠标悬停时不可见，如果在同一个div中添加任何a：链接（如上面的div 登录）。但是如果我从div 登录中删除：link，则悬停有效。

我无法弄清楚问题。

Answer 1

我会按如下方式重写你的标记：

＆＃13;

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

＆＃13;

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

＆＃13;

正如Muhammad Usman在评论中提到的，你不应该在a元素中嵌入a元素......正如你所看到的，我已经移动了隐藏的div要显示在第一个a元素之外，并在悬停在第一个a元素上时使用兄弟选择器来定位它。

如果您真的必须保留当前的标记，那么您只需将:hover州的位置更改为.account类本身，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

a：链接无法在悬停DIV中工作

1 个答案: