Javascript Jquery在鼠标上循环，带有多个div

好吧，希望我能清楚地表达这一点，让大家明白我的观点。我做了一些搜索，但没有找到真正的答案

JSFIDLE页面：另外，一些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'})
            }})();
        });
    };

//鼠标悬停
对于（var i=0；i您的CSS看起来仍然令人毛骨悚然，但是，为了停止触发整个父树的鼠标悬停事件，请编辑第3行和第4行，如下所示：

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

看起来您在每个鼠标上都显示了所有的
overlyc
s

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);
};

for（var i=0；i给你

如果您的代码位于头中，那么出于某种原因，您的Overlyc调用了all，但能够使用eq（0）进行控制，那么需要做什么，但这将移动整个客户端div（#clientral），并稍微改变最后一个的位置。谢谢，我知道我做了什么。我尝试了类似的东西，但缺少一些东西。再次感谢！
$('[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'});
    })
});