How to affect div that is before div with hover

Navigation
0

We assumed this code. How do I affect the nav class and the img__logo class when the input is hover? 

<div class="nav">
   <div class="img__logo"></div>
   <input class="form__login"/>
</div>

.form__login + .img__logo{
  display:none;
}
    
asked by anonymous 10.06.2016 / 17:56

1 answer

3

There is no way for CSS to affect parent elements.

For modern browsers, you can pass the hover out of the input: .nav:hover { } and .nav:hover .img__logo { } : 

.nav {background:gray;padding:10px}
.nav .img__logo {background:blue;min-height:10px}

.nav:hover {background:teal}
.nav:hover .img__logo {background:red}
<div class="nav">
   <div class="img__logo"></div>
   <input class="form__login"/>
</div>

Another output would be to put an extra div in the input , and in this div move the image up.

Now, if you want to make a tooltip, you have other ways:

  

Is it possible to make a tooltip with pure CSS?

    
10.06.2016 / 18:09
Sort a list ul by the attribute "value" of the li? Automatic page redirection