Question

此代码

$(document).ready(function(){
    $(".one").hover(
        function(){
            $(".overlay").fadeTo(200,1).show();
        },
        function(){
            $(".overlay").delay(500).fadeTo(200,0);
        }
    ); 
});

将第二个DIV叠加在第一个DIV之上，但在同一页面上中断多个实例。我想我需要放$(this)。在某处，但无法弄清楚在哪里。

感谢任何帮助。

Answer 1

您可以通过遍历访问它。假设它是元素'one'的子元素，这只会将效果应用于悬停元素'one'的名为'overlay'的子元素。

$(".one").hover(
    function(){
        $(this).children(".overlay").fadeTo(200,1).show();
    },
    function(){
        $(this).children(".overlay").delay(500).fadeTo(200,0);
    }
);

以下是jQuery tree traversal的参考资料。

Answer 2

你是对的，你确实需要一个this：

<强>的jQuery ：

$(document).ready(function(){
    $(".one").hover(
        function(){
            $(".overlay",this).fadeTo(200,1).show();
        },
        function(){
            $(".overlay",this).delay(500).fadeTo(200,0);
        }
    );
});

这是一个 jsFiddle （高度降低以便于查看）。

“这个”在这里工作的方式是，当你将鼠标悬停在.one div上时，“this”指的是你正在盘旋的div。悬停事件中的函数将引用正在盘旋的div，并执行您想要对它们执行的任何操作。如果没有“this”，您在函数中应用的操作将应用于具有“overlay”类的所有元素，而不仅仅是div中的叠加层。 “this”实际上限制了基于悬停的元素（“this”）所应用的动作。换句话说，$(".overlay",this)限定了上下文并限制它。

单个页面上有多个DIV叠加层

2 个答案: