Why doesn't this disappear after hovering?

Question

JsFiddle

HTML

<p>im a duck</p>

CSS

p:hover {
    display:none;
}

Shouldn't it disappear after hovering?

Answer 1

It does disappear.

However, after it disappears, it's no longer hovered, so it re-appears.

Each time you move the mouse, the cycle repeats; if you move the mouse over it, you'll see it flickering.

The exact behavior depends on the browser; in particular, Chrome only recalculates hover states on mouse events.

Answer 2

this will make more sense to you.

html:

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

css:

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

hope that helped.