CSS - display:none on hover self - html

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

Answer 1

Try changing the element's opacity instead: http://jsfiddle.net/XtmVQ/
.foo:hover {
opacity:0;
}

Answer 2

try this instead of display:none
visibility:hidden

Answer 3

Try this:
.foo:hover {
opacity: 0;
}
What is your final intent for this?

Answer 4

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.

Answer 5

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/

Answer 6

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();
});