将鼠标悬停在一个元素上，将一个类添加到另一个元素中？

Question

所以当用户将鼠标悬停在我页面上的菜单栏上时，我希望页面的其余部分变暗。我试过搞乱一些jQuery，但我似乎无法弄清楚如何正确地做到这一点？

当用户在#header上盘旋时，我想在#content中添加一个“.darken”类。我可能会使用.darken来应用不透明度。

谢谢

<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

您可以使用.hover（）函数

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

演示：Fiddle