Question

嗯，希望我能说清楚这一点并明白我的观点。我已经完成了一些搜索，但没有真正的搜索。

JSfiddle页面：JS Fiddle此外，一些CSS的大小不正确，因为那不是正确的图像。

但这是Javascript代码：

 //mouse over
for(var i = 0; i<10; i++){
    $("#client"+i).on("mouseover", function(){
        $(this).removeClass("clientsOff").addClass("clientsOn");
        for(var e = 0; e < 10; e++){
            (function(){
                $("#overlayC"+e).css({'display':'block'});
                })();
            };
        });
    };

  //mouse leave 
for(var i = 0; i<10; i++){
    $("#client"+i).on("mouseleave", function(){
        $(this).removeClass("clientsOn").addClass("clientsOff");
        (function(){
            for(var e = 0; e<10; e++){
                $("#overlayC"+e).css({'display':'none'})
            }})();
        });
    };

好的，到了这一点。这里有两个悬停活动。其中一个（正常工作）只是在每次悬停时切换类，并且一次只进行一次。

现在，第二个是另一个悬停效果，但不是一次一个地显示它们。

现在解决这个问题的最简单方法是只为每个id悬停，但这将永远/效率不高。这就是为什么我在这里使用循环。现在，我知道它需要另一个闭包，但它无法正常工作。

我尝试了几种不同的方法，但是要么他们抛出相同的结果，要么根本不工作。

是的，起始循环可能都是一个，但是现在它有助于保持分离，以便我可以更好地阅读内容

Answer 1

看起来你在每只鼠标上显示所有overlayC

for(var i = 0; i<10; i++){
    (function(i){
        $("#client"+i).hover(function(){
            $(this).removeClass("clientsOff").addClass("clientsOn");
            $("#overlayC"+i).css({'display':'block'});
        }, function(){
            $(this).removeClass("clientsOn").addClass("clientsOff");
            $("#overlayC"+i).css({'display':'none'})
        });
    })(i);
};

演示：Fiddle

Answer 2

这是你jsFiddle edited

$('[id*="client"]').each(function(){
    $(this).hover(function(){
        $(this).removeClass("clientsOff").addClass("clientsOn")
        .find('[id*="overlayC"]').eq(0).css({display:'block'});
    },function(){
        $(this).removeClass("clientsOn").addClass("clientsOff")
        .find('[id*="overlayC"]').eq(0).css({display:'none'});
    })
});

如果您的代码在头部，请执行$（function（）{// code}）;

Answer 3

您的CSS看起来仍然令人毛骨悚然，但是，为了停止整个育儿树的鼠标悬停事件，请按照以下方式编辑第3行和第4行：

... function(elem){
        if (elem.target!=this) {return false;} 
...

Jquery通过onmouseover循环，有多个div

3 个答案: