How to affect div who is before div with Hover

Asked

Viewed 154 times

0

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

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

.form__login + .img__logo{
  display:none;
}
html css

1 answer

3

There’s no way in 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 way out would be to put one div extra in the input, and in this div move the image up.

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

It is possible to make a tooltip with pure CSS?

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.