0

当另一个 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');
}

});

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

4

3 回答 3

0

刚刚想通了。我将 a 添加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');
}

});
于 2012-10-29T19:20:49.950 回答
0

更改您的fadeDivIn和fadeDivOut功能如下：

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

function fadeDivOut() {
    var $kids = $(this).children();
    $($kids).fadeOut('slow');
}
于 2012-10-29T18:37:36.637 回答
0

在您的淡入和淡出功能中，您需要选择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');
}

});
于 2012-10-29T18:39:00.693 回答