4

为什么这是按元素工作的？

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

如果你点击每一个，它就会消失。

但如果我用悬停编码它..

<script>
$(document).ready(function(){
  $("p").hover(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

他们都一起消失了。有什么不同？

4

5 回答 5

6

这是因为当您将鼠标悬停在第一个<p>元素上方时，它会消失，因此第二个<p>元素会向上移动以取代它的位置 - 这个过程会一直重复，直到所有<p>元素都被隐藏起来，因为您的鼠标将始终悬停在它们上方。

于 2013-09-22T18:22:39.053 回答
4

尝试将鼠标悬停在底部元素上，它只会删除正确的元素。

您认为它正在删除所有这些的原因是因为它正在删除顶部的，然后它们移动到顶部，并且它会非常快速地依次删除它们。

于 2013-09-22T18:22:30.723 回答
2

问题是，当每个都p被删除时，下一个p会向上移动到鼠标下方。如果您先将鼠标悬停在底部<p>，您将看到只有那个被删除。

脚本没有问题。小提琴：http: //jsfiddle.net/zXKGk/

于 2013-09-22T18:23:14.993 回答
1

由于每个元素会进一步向上移动，因此您的鼠标接下来会悬停在它上面，从而将其移除。为了缓解这种情况，您可以通过让新元素在不可见的同时保留相同的空间来避免将新元素进一步向上移动：

$("p").hover(function () {
    $(this).css("visibility", "hidden");
});

http://jsfiddle.net/JqXwv/

于 2013-09-22T18:25:47.623 回答
0

如果您尝试从底部p标签悬停，您将知道拍摄没有任何问题。您的p标签消失了，因为悬停在下面的p标签只是移动到上面并占据第一位，这实际上很难注意到。您可以尝试记录以控制每个p标签的事件。

http://jsbin.com/OpIpOpO/1/edit?html，输出

于 2013-09-22T18:25:23.307 回答