CODEWITHSUNDEEP
htmlcsshover
ADP_X
ADP_X

Reputation: 333

CSS hover doesn't work

I'm quite new to HTML and CSS and I know this is probably a very dumb question but I've been trying to solve it for a while and I can't figure out what's wrong.

I want one div to change its backgound-color when the mouse enters another element not related to it (when the div is the child of the other component it works fine).

My HTML:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>

    </nav>
<div></div>
</body>
</html>

And the CSS:

* {
    margin: 0px;
    padding: 0px;
}

nav {
    width: 100%;
    height: 50px;
    background-color: black;
}

div {
    width: 100%;
    height: 40px;
    background-color: green;
    position: absolute;
    left: 500px;
}

 nav:hover div {
    background-color: blue;
}

I've tried changing the "nav:hover div" rule for something like "nav:hover body > div" but it doesn't work either...

Thank you in advance for your help.

Upvotes: 4

Views: 34401

Answers (1)

j08691
j08691

Reputation: 208022

Use the adjacent sibling selector +:

nav:hover + div {
    background-color: blue;
}

jsFiddle example

The rule you had tried, nav:hover div, was looking for divs that were descendants of a nav. You wanted the sibling.

Upvotes: 14

Related Questions