Question

当用户将鼠标悬停在导航栏的登录部分（li class =“menuLogin）时，我想要一个下拉登录框（div class =”signin“）。但出于某种原因，我有一个即使看起来很简单，也很难实现这一点。

登录框设置如下：

.signin {
...
...
display:none;
}

我会假设如果我想在悬停时看到登录框，我会执行以下操作：

#nav > ul > li.menulogin:hover .signin{
    display:block;
}

然而，这个和许多变化，我无法让它工作！

测试

#nav > ul > li.menulogin:hover{
    font-size:20px;
}

确实改变了导航栏的字体大小，因此这部分有效。是我说的地方：

#nav > ul > li.menulogin:hover .signin{
}

我哪里出错了？

非常感谢。

HTML如下：

<div id="nav">
  <ul>
    <li class="menulogin"><a href="#">Login</a></li>
    <div class="signin" popup="">
      <div class="inner">
        <div class="title"> SIGN IN </div>
        <form method="post" action="www.google.com">
          <fieldset>
            <div class="inputrow"><input type="text" class="box-input" id="usernameInput"

                name="Login" placeholder="Username" /> </div>
            <div class="inputrow"><input type="password" class="box-input" id="passInput"

                name="Password" placeholder="Password" /> </div>
            <div class="row"> <input type="submit" value="ENTER" class="button" />
            </div>
            <div class="row"> <a href="/member/forgotpassword">Forgot
                Password?</a> </div>
          </fieldset>
        </form>
      </div>
    </div>
    <li><a href="#">En</a></li>
    <li><a href="#">£</a></li>
    <li><a href="#">Corporate</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

CSS如下：

#nav ul {
    width: 100%;
    float: left;
    margin: 0 0 6px 0;
    padding: 0;
    list-style: none;
    background-color: #1c2d5f;
    border-bottom: 1px solid #f3ddaa; 
    border-top: 1px solid #ccc; 
    font:16px Times New Roman, Times, serif;
}
#nav ul li {
    float: right; 
}
#nav ul li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #e9cb73;
    border-right: 1px solid #ccc; 
}
#nav ul li a:hover{
    display:block;
    color: #f3ddaa;
    background-color: #253775; 
}


#nav > ul > li.menulogin:hover .signin{

display:block;

}

/*LOGIN BOX*/
.signin {
width: 212px;/*width of element*/
right: 0px;/*needed for position*/
top: 37px; /*height of navbar*/
border: solid; /*standard border*/
border-width: 1px 1px 1px 1px;/*standard border*/
border-color:#f3ddaa;/*standard border*/
position: absolute;/*ignores other elements for position*/
background: #1c2d5f;/*background colour*/
-webkit-box-shadow: 2px 2px 4px 0px;/*nice shadow effect*/
box-shadow: 2px 2px 4px 0px;/*nice shadow effect*/
display:none;
}

Answer 1

使用adjacent sibling combinator, +，选择.signin之前的li.menulogin元素：

#nav > ul > li.menulogin:hover + .signin {
    display:block;
}

WORKING EXAMPLE HERE

您试图选择.signin的{{1}}元素。

li.menulogin的用法假设元素是相邻的。否则你会使用general sibling combinator, ~，如果不是这样的话。

值得注意的是，如果你将鼠标悬停在它上面，#nav > ul > li.menulogin:hover ~ .signin { display:block; }元素将会消失（就像上面的例子中一样）。要解决此问题，请将鼠标悬停在.signin

上时添加display:block

.signin:hover

UPDATED EXAMPLE HERE

CSS - 在悬停时无法获取单个li元素来显示div

1 个答案: