CSS - display:none on hover self

Question

I am trying to create an effect where if a user hovers over an element, the element disappears. I have tried the code below, but it seems that the display:none; breaks the CSS. I am wondering why my CSS does not work, and how I would solve my problem.

http://jsfiddle.net/2c42U/

<div class="foo">text</div> 

.foo:hover {
    color: red;
    display: none;
}

You can't hide element on hover with display: none. It doesn't work because it has no sense. — dfsq
– dfsq, Commented Mar 12, 2013 at 20:02
You can, but it will not work. just think what should happen next? Div disappeared, should it appear again because it's no longe hovered? This is why it just does nothing. — dfsq
– dfsq, Commented Mar 12, 2013 at 20:03
@dfsq - That makes sense, but the same logic should apply to changing the position of an element when it is :hover'ed, and yet I can do that: jsfiddle.net/XtmVQ/2 I wonder if there's something in the specs which say you can't change display with a :hover pseudo-class... — Richard JP Le Guen
– Richard JP Le Guen, Commented Mar 12, 2013 at 20:17

Richard JP Le Guen · Accepted Answer · 2013-03-12 20:02:52Z

10

Try changing the element's opacity instead: http://jsfiddle.net/XtmVQ/

.foo:hover {
    opacity:0;
}

answered Mar 12, 2013 at 20:02

Richard JP Le Guen

28.8k8 gold badges93 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jon Over a year ago

Sweet! I got so fixated on trying to hide the element I forgot about just making the user think the element was hidden!

VoidKing Over a year ago

@icu222much Make sure you check that in various versions of IE. It needs "alpha-opacity" set instead of just opacity.

TrippinBilly · Accepted Answer · 2013-03-12 20:04:05Z

3

try this instead of display:none

visibility:hidden

answered Mar 12, 2013 at 20:04

TrippinBilly

9572 gold badges10 silver badges19 bronze badges

Comments

Shawn H. · Accepted Answer · 2013-03-12 20:04:23Z

1

Try this:

.foo:hover {
    opacity: 0;
}

What is your final intent for this?

answered Mar 12, 2013 at 20:04

Shawn H.

7891 gold badge9 silver badges22 bronze badges

Comments

fizzy drink · Accepted Answer · 2013-03-12 20:06:28Z

1

as @Richard said, use opacity

also, to be backwards ie, do as follows:

filter:alpha(opacity=0); /* For IE8 and earlier */

and you can also add a transition:

transition: 0.5s

so that it is not instant.

answered Mar 12, 2013 at 20:06

fizzy drink

6829 silver badges22 bronze badges

Comments

Amy · Accepted Answer · 2013-03-12 20:09:03Z

1

You can do what the others suggested, use opacity: 0; or visibility:hidden;, but if you must have it hidden from the flow of the page. Then do the following:

Use a CSS like this:

.hidden{
    display: none !important;
}

You can use the class hidden and apply it to any element to hide it. For the hover behaviour you want, you'll require JavaScript/jQuery to apply the class name. See http://jsfiddle.net/rkH7F/

answered Mar 12, 2013 at 20:09

Amy

7,5262 gold badges22 silver badges31 bronze badges

Comments

Carlo Adap · Accepted Answer · 2013-03-12 20:39:27Z

-2

i think css will not work. use jquery

UPDATE

ohh, my bad. css will work but the jquery will have a better effect

     $('#outer').mouseenter(function() {
       $("#outer").hide();
     }); $('#outer').mouseleave(function() {
       $("#outer").show();
     });

FIXED

     $('#outer').mouseenter(function() {
       $("#outer").slideUp();
     }); $('#outer').mouseleave(function() {
       $("#outer").slideDown();
     });

edited Mar 12, 2013 at 20:39

answered Mar 12, 2013 at 20:02

Carlo Adap

1572 gold badges2 silver badges9 bronze badges

5 Comments

Richard JP Le Guen Over a year ago

WRT "css will work but the jquery will have a better effect" - how is it a better effect?

Carlo Adap Over a year ago

.slideUp() .slideDown() .slideToggle() is what I mean, I got confused grr. sorry

Richard JP Le Guen Over a year ago

What is #outer? Also, even your updated solution behaves strangely: jsfiddle.net/XtmVQ/3

Carlo Adap Over a year ago

for example ID of a div :)

Richard JP Le Guen Over a year ago

Why not use the element identifier (.foo) from the OP's code snippet?

Collectives™ on Stack Overflow

CSS - display:none on hover self

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related