Question

我有一个下拉菜单，当您将鼠标悬停在登录按钮上时，会弹出登录表单，但是当您选择输入字段并将鼠标移出下拉列表时，下拉菜单会消失。那么我怎样才能保持这种下拉？

关于这个jsFiddle你能看到我想要解释的内容吗。

我尝试了这个，但那不起作用：

CSS

.login form input:focus .login{
   display:block;
}

我也试过这个 css

.login > form > input:focus .login{
    display:block;
}

登录按钮的html和关联的drop-up div

<li class="right"><p>Log In</p>
                <div class="login">
                    <form>
                        <h1>Log In</h1>
                        <input type="text" placeholder="username"/>
                        <input type="password" placeholder="password"/>
                        <br>
                        <div class="submit">Log In</div>
                    </form>
                </div>
</li>

我不明白为什么这不起作用，因为当你在登录按钮上方时，你也将弹出div的display设置为阻止，为什么这不起作用。

Answer 1

首先，你的CSS例子都意味着（你必须从右到左阅读它们）： “将display：block;应用于输入中的任何.login元素：focus child，它具有父表单，具有父.login元素”。

事实上，在CSS中，您无法在对子元素（<li>）执行操作时对父元素（div.login）应用某些内容。

但是你可以用一点点javascript显示/隐藏你的.login元素。例如，您可以在点击菜单元素<li>后为此元素添加一个类。

Answer 2

你肯定必须使用JS。我们不能通过CSS选择父元素。

有助于您理解这一点的问题：
Is there a CSS parent selector?

还有一个参考。在这里：
http://css-tricks.com/parent-selectors-in-css/

希望你会喜欢jquery实现这个目标：
http://api.jquery.com/parent/

享受编码!!

为什么显示块无法在输入场焦点上工作？

2 个答案: