将鼠标悬停在 :nth div 上，显示 :nth div答案

【问题标题】：Hover over :nth div, show :nth div将鼠标悬停在 :nth div 上，显示 :nth div
【发布时间】：2014-05-15 22:07:07
【问题描述】：

我为标题道歉，但有点难以解释。我有这两个 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);
        });
    });

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

【问题讨论】：

你能给我们更多的代码吗，比如 .categoryBlock 是什么？
对不起，我正在编辑它。
首先在你的 jQuery 中你有 #smallDef 但是没有小的 defs。有.smallDef 如果您使用 ids，您只会让第一个元素工作，因为 id 只会返回一个元素 ids 必须是唯一的。还要带上您的 indexHoverItem 并使其成为全球性的。添加监听器，当您将鼠标悬停在 smallDef [indexHoverItem].style.display="block"; 时，我看到的只是一些小错误，所以修复这些然后从那里开始。
EasyBB，我知道，我在这里发布它的速度太快了。这些当然是课程。

标签： jquery loops hover

【解决方案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);
});

【讨论】：

谢谢，对我来说这是最有用的功能。这确实表明我的思维方式过于复杂！

【解决方案2】：

我建议：

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

【讨论】：

是index() 相对于父母吗？
@MathewFoscarini 没有传递参数，是的。否则返回 jQuery 集合中传递的元素的索引。
这很好。我接受了 Spokey 的答案，因为对我来说它是最好读的。
op 还需要考虑的是，在他们永远离开这个显示的 div 之后他会做什么，或者它会在一段时间后隐藏还是在他们离开后自动隐藏。
@EasyBB 是的。我曾假设在最后一个 mouseleave 事件中没有可见元素。

【解决方案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();
});

【讨论】：