4

JsFiddle

HTML

<p>im a duck</p>

CSS

p:hover {
    display:none;
}

Shouldn't it disappear after hovering?

4

7 回答 7

13

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.

于 2013-10-16T14:21:51.913 回答
3

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.

于 2013-10-16T14:23:31.740 回答
2

With display: none you're completely removing the element from visibility, including height and width. So when you hover it, you completely remove it thus resulting in not hovering, then it reappears. It's a pretty interesting cycle.

You may want to look into visbility or trying to set it within a container that doesn't get hidden so you have some sort of hoverable object at all times.

于 2013-10-16T14:23:08.293 回答
2

A simple alternative would be to do something like this:

p:hover {
    opacity: 0;
}

However, that will only work while the hovering it happening. It's won't hide the element once hovering has ceased.

于 2013-10-16T14:30:35.900 回答
1

It will be working, but note that once the element goes display: none, you can't hover it anymore, because there's nothing to display. So it goes unhovered, which then allows the rule to apply again, so essentially you're flickering between hovered and un-hovered VERY quickly, essentially making it look like nothing's happening.

于 2013-10-16T14:23:30.377 回答
1 
display:none

Will hide the element on hover, thus the element is no longer hovered over, so it reappears.

visibility:hidden;

Will set the element to invisible, however under the visibility state the element is no longer listening to the hover event and so will reappear, similar to display:none

Technically, you could do this on hover to get the desired effect

opacity:0;

and the element will remain hidden whilst you are hovering over it. This is due to the element still listening for events as opacity doesn't affect this.

Here's a fiddle comparing the 3

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

于 2013-10-16T14:30:52.087 回答
0

You can use javascript to do this job 

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

see this fiddle for more info.

于 2013-10-16T14:28:15.737 回答