CODEWITHSUNDEEP
javascriptjqueryhtmlcss
caustic
caustic

Reputation: 585

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

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

Upvotes: 0

Views: 47

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use the .hover() function

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

Demo: Fiddle

Upvotes: 3

Related Questions