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

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

本文关键字：元素 添加 另一个 鼠标 一个 悬停      更新时间：2023-09-26

因此，当用户将鼠标悬停在页面上的菜单栏上时，我希望页面的其余部分变暗。我试过摆弄一些jQuery，但我似乎不知道如何正确地做到这一点？

当用户悬停在#header上时，我想向#content添加一个类'.dark。我可能会使用.ddark来应用不透明度。

谢谢

<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

您可以使用.haverage（）函数

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

演示：Fiddle

相关文章：