Question

我正在使用jQuery hoverIntent插件在另一个div悬停时淡入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');
}

});

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

3 个答案: