Question

我为标题道歉，但有点难以解释。我有这两个div：

<div id="a">
   <div class="categoryBlock"></div>
   <div class="categoryBlock"></div>
   <div class="categoryBlock"></div>
   <div class="categoryBlock"></div>
   <div class="categoryBlock"></div>
</div>

<div id="b">
   <div class="smallDef"></div>
   <div class="smallDef"></div>
   <div class="smallDef"></div>
   <div class="smallDef"></div>
   <div class="smallDef"></div>
</div>

如果用户将鼠标悬停在第一个容器中的第二个div上，则应显示第二个容器中的第二个div。对于第三，第四，第五，......也是如此。

我有这段代码：

var CatBlock = $("#content_main-portal-page .categoryBlock"); 
CatBlock.each(function() {
        $(this).hover(function() {
            var indexHoverItem = $("#a").find(".categoryBlock").index($(this));
            $("#smallDef").eq(indexHoverItem).stop(true,true).fadeIn(160);
        }, function() {
            var indexHoverItem = $("#a").find(".categoryBlock").index($(this));
            console.log(indexHoverItem);
            $("#smallDef").eq(indexHoverItem).stop(true,true).delay(160).fadeOut(160);
        });
    });

目前，只有第一个悬停才起作用（在第一个元素上），就好像没有每个悬停一样。有人能帮助我吗？

Answer 1

我不确定你的功能是否过于复杂，或者你想要别的东西

$('#a div').hover(function () {
    $("#b div").eq($(this).index()).stop(true, true).fadeIn(160);
}, function () {
    $("#b div").stop(true, true).delay(160).fadeOut(160);
});

Answer 2

我建议：

$('#a > div').on('mouseenter mouseleave', function (e) {
    var m = e.type === 'mouseenter' ? 'fadeIn' : 'fadeOut';
    $('#b > div').hide().eq($(this).index()).stop()[m]();
});

Answer 3

您可以尝试添加表示配对的ID。

$("#a").each(function(i,e) {
    $(this).attr('tag','b'+i).attr('id','a'+1);
});
$("#b").each(function(i,e) {
    $(this).attr('tag','a'+i).attr('id','b'+1);
});
$("#a > div,#b > div").bind('hover',function(){
   $(this).fadeIn();
   $('#'+$(this).attr('tag')).fadeIn();
});

将鼠标悬停在：nth div，show：nth div

3 个答案: