Why is display block not working on input field focus?

Question

I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?

On this jsFiddle can you see what I am trying to explain..

I tried this but that didn't work:

css

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

I also tried this css

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

html of the login button and the associated 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>

I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.

`.login > form > input:focus .login` this does not work as CSS is not working this way.. it only works from the outer node to its inner nodes. — BeNdErR, Feb 19 '15 at 10:35
@BeNdErR okay Thanks for your tip but do you see if the first try is also a wrong selector? — Vinc199789, Feb 19 '15 at 10:37
have a look at this fiddle: http://jsfiddle.net/ck1651Lu/ it should help you to understand what I mean — BeNdErR, Feb 19 '15 at 10:42
@BeNdErR Why has noby up-voted my question. Is there something wrong with it? — Vinc199789, Feb 19 '15 at 13:39

score 1 · Accepted Answer · answered Feb 19 '15 at 10:40

First, both your CSS examples mean (you must read them from right to left): "apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".

In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).

But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.

Thanks for you answer and help. I added a little bit of Jquery and not it works. — Vinc199789, Feb 19 '15 at 10:49

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

You will surely have to use JS for this. We cannot select parent element via CSS.

Question that will help you understand this:
Is there a CSS parent selector?

One more ref. here:
http://css-tricks.com/parent-selectors-in-css/

Hope you will like jquery for achieving this:
http://api.jquery.com/parent/

Enjoy Coding!!

edited May 23 '17 at 11:50

Community

1
1

answered Feb 19 '15 at 11:40

Manish Gupta

1,405
14
32

Why is display block not working on input field focus?

2 Answers2