0

好吧，希望我能清楚地表达这一点并表达我的观点。我已经进行了一些搜索，但没有任何东西真正击中它。

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 悬停，但这将永远/不是非常低效。这就是为什么我在这里使用循环。现在，我知道它需要再次关闭，但它无法正常工作。

我尝试了几种不同的方法来做到这一点，但是它们要么抛出相同的结果，要么根本不起作用。

是的，起始循环可能都是一个，但现在它有助于将事情分开，这样我可以更好地阅读事情

4

3 回答 3

1

看起来您overlayC在每个鼠标上都显示所有 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);
};

演示：小提琴

于 2013-05-31T02:56:12.860 回答
1

这是你的jsFiddle 编辑

$('[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});

于 2013-05-31T03:06:14.643 回答
0

您的 CSS 看起来仍然令人毛骨悚然，但是，为了阻止整个育儿树的鼠标悬停事件触发，编辑第 3 行和第 4 行，如下所示：

... function(elem){
        if (elem.target!=this) {return false;} 
...
于 2013-05-31T02:52:28.670 回答