Hover on an element to add a class to another element?

Question

So I want the rest of the page to darken when a user hovers over the menu bar on my page. I've tried messing around with some jQuery but I can't seem to figure out how to do this correctly?

When a user hovers on #header, I want to add a class '.darken' to #content. I will probably use .darken to apply an opacity.

Thank you

<div id="header" class="header">
    <a href="">Home</a>
    <a href="">About</a>
    <a href="">Contact</a>
</div>
<div id="content" class="content">
    <h1>Homepage</h1>
    <p>Synth sriracha fashion axe gastropub.</p>
</div>

jsFiddle

Answer 1

You can use the .hover() function

$('#header').hover(function(e){
    $('#content').toggleClass('darken', e.type=='mouseenter')
})

Demo: Fiddle