jQuery将div和addClass悬停在另一个div上

Question

HTML结构：

<div class="alpha">
// something goes here

<div class="beta"></div>

</div>

当我悬停div“beta”时，一个类添加到div“alpha”..

我正在使用jQuery addClass / removeClass。

jQuery('.beta').hover(
function(){$(".alpha").addClass('hover')},
function(){$(".alpha").removeClass('hover')});

注意：这里我有多个div（alpha divs），所以当我使用上面的jQuery时，类也添加到其他div中，但我想将类添加到只有悬停的div：）

感谢

Answer 1

尝试在悬停函数中使用$(this)引用，然后使用.closest（）来定位所需的元素。即具有类.alpha

的元素

jQuery('.beta').hover(function(){
   $(this).closest(".alpha").addClass('hover')
},function(){
   $(this).closest(".alpha").removeClass('hover');
});

Answer 2

您需要使用$(this).closest('.alpha')将其与悬停元素相关联。您还可以使用toggleClass：

缩短代码

jQuery('.beta').hover(function(){
    $(this).closest(".alpha").toggleClass('hover');
}};

Answer 3

如果结构总是与你的例子相同，我会使用.parent（）函数。

$('.beta').hover(function(){
   $(this).parent().toggleClass('hover');
});

这样你就不需要指定alpha类了，至少脚本有点短：P

Here's a fiddle for you

如果您的结构发生了变化，但.alpha仍然是＆＃34;主人＆＃34;您可以指定父级

$(this).parent(".alpha").toggleClass('hover');