Geek Answers Handbook

Why is $ (this) called correctly for a click, but not for freezing?

why does this work with an element?

<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>

If you click on each, it will disappear.

But if I encode it with a hang ..

 <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>

They all disappear together. What's the difference?

+4
source share
5 answers

This is because when you hover over the first <p> element, it disappears, and therefore the second <p> element moves up to take its place - this process is repeated until all <p> elements are hidden, your mouse will always hover over them.

+6
source

Try to hover over the bottom element, it will remove only the correct one.

The reason you think that removing all of them is because it removes the top, then they move to the top, and it sequentially removes them all very quickly.

+4
source

The problem is that when each p deleted, the next p moves up under the mouse. If you first hover over the bottom of the <p> , you will see that only the one is deleted.

No problem with the script. Fiddle: http://jsfiddle.net/zXKGk/

+2
source

As each element moves further, your muscle hangs over it, thereby removing it. To mitigate this, you can avoid moving new elements further if they retain the same space while being invisible:

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

http://jsfiddle.net/JqXwv/

+1
source

If you try to hover over the bottom p tag, you will find out that there is nothing wrong with that. The p tags disappear because when you hover p tags simply move higher and take first place, which is actually too hard to notice. You can try to register to consolidate the event in each p tag.

http://jsbin.com/OpIpOpO/1/edit?html,output

0
source

More articles:


All Articles