多次使用该类时，jQuery hoverIntent仅适用于一个div类

Question

当另一个div悬停在div上时，我正在使用jQuery hoverIntent插件淡入div。 有4个元素共享一个班级名称，我只想淡入我正在悬停的元素的孩子，而不是共享班级孩子的每个div。 现在的问题是，如果我将鼠标悬停在一次潜水上，则所有4个元素的孩子都会消失。 我的代码中哪儿有代码出错？

这是html：

<div id="resources" class="faded">

<div class="resourcesHover"></div>

</div>

<div id="forBuilders" class="faded">

<div class="buildersHover"></div>

</div>

<div id="fam" class="faded">

<div class="famHover"></div>

</div>

<div id="homePlans" class="faded">

<div class="plansHover"></div>

</div>

这是jQuery

$(document).ready(function(){

$(".faded").hoverIntent({
    over:    fadeDivIn,
    timeout: 300,
    out:     fadeDivOut
});

function fadeDivIn() {
    var $kids = $('.faded').children();
    $($kids, this).fadeIn('slow');
}

function fadeDivOut() {
    var $kids = $('.faded').children();
    $($kids, this).fadeOut('slow');
}

});

万一有人遇到类似的问题，我想出了解决方案，并将其发布在下面。

Answer 1

更改您的fadeDivIn和fadeDivOut函数，如下所示：

function fadeDivIn() {
    var $kids = $(this).children();
    $($kids).fadeIn('slow');
}

function fadeDivOut() {
    var $kids = $(this).children();
    $($kids).fadeOut('slow');
}

Answer 2

在淡入和淡出功能中，您需要选择this而不是faded该类的所有元素

$(document).ready(function(){

$(".faded").on('mouseover', function() {
    fadeDivIn(this);
});

$(".faded").on('mouseout', function() {
    fadeDivOut(this);
});

function fadeDivIn(hovered_over) {
    var $kids = $(hovered_over).children();
    $($kids).fadeIn('slow');
}

function fadeDivOut(hovered_over) {
    var $kids = $(hovered_over).children();
    $($kids).fadeOut('slow');
}

});

Answer 3

只是想通了。 我在将子级设置为变量的行中添加了this,并将其从.fadeIn和.fadeOut行中删除。

这是新的jQuery：

$(document).ready(function(){

$(".faded").hoverIntent({
    over:    fadeDivIn,
    timeout: 300,
    out:     fadeDivOut
});

function fadeDivIn() {  
    var $kids = $(this,'.faded').children();
    $($kids).fadeIn('slow');
}

function fadeDivOut() {
    var $kids = $(this,'.faded').children();
    $($kids).fadeOut('slow');
}

});