CSS hover doesn't work

Question

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.

`nav:hover div` means a `div` nested in the `nav` while being `hovered`. — MrHunter, Apr 23 '14 at 20:53
possible duplicate of [On a CSS hover event, can I change another div's styling?](http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling) — ProllyGeek, Apr 23 '14 at 20:59

score 14 · Accepted Answer · answered Apr 23 '14 at 20:54

14

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.

answered Apr 23 '14 at 20:54

j08691

204,283
31
260
272

CSS hover doesn't work

1 Answers1