Why does this not disappear after freezing?

Question

Jsfiddle

HTML

<p>im a duck</p>

CSS

p:hover {
    display:none;
}

Should it disappear after freezing?

Answer 1

A simple alternative would be to do something like this:

p:hover {
    opacity: 0;
}

However, this will only work during a hang. It will not hide the element as soon as the freeze stops.

Answer 2

He is disappearing.

However, after it disappears, it no longer freezes, so it reappears.

Each time you move the mouse, the cycle repeats; if you move the mouse over it, you will see that it flickers.

The exact behavior is browser dependent; in particular, Chrome only recounts hover states for mouse events.

Answer 3

.

HTML:

<div class="cont"><p>foo</p></div>

CSS

.cont{width:100%;height:30px;}
.cont p{}
.cont:hover p{display:none}

, .

Answer 4

display: none , . , , , , . .

, visbility , , - hoverable.

Answer 5

, , display: none, , . , , , , , , .

Answer 6

display:none

, , .

visibility:hidden;

, hover , display:none

,

opacity:0;

and the element will remain hidden while you hang over it. This is because the element is still listening for events, because opacity does not affect this.

Here's a fiddle comparing 3

http://jsfiddle.net/mEVHp/1/

Answer 7

You can use javascript to accomplish this task.

$('p').hover(function(){
 $(this).hide();
});

see fiddle for more information.