how to hide the content of the div in css

Question

I have this html code

<div id="mybox"> aaaaaaa </div>

and this is my css

#mybox{
   background-color:green;
}

#mybox:hover{
   background-color:red;
}

the question is how to hide the content of the div (aaaaaaa) when the mouse hover event by using css only and without changing the structure of the code I think I should put some code under "#mybox:hover" but I don't know the code

Thanks in advance for help

Answer 1

You could make the text color the same as the background color:

#mybox:hover
{
  background-color: red;
  color: red;
}

Answer 2

#mybox:hover { display: none; }
#mybox:hover { visibility: hidden; }
#mybox:hover { background: none; }
#mybox:hover { color: green; }

though it should be noted that IE6 and below wont listen to the hover when it's not on an A tag. For that you have to incorporate JavaScript to add a class to the div during the hover.

Answer 3

Without changing the markup or using JavaScript, you'd pretty much have to alter the text color as knut mentions, or set text-indent: -1000em;

IE6 will not read the :hover selector on anything other than an anchor element, so you will have to use something like Dean Edwards' IE7.

Really though, you're better off putting the text in some kind of element (like p or span or a) and setting that to display: none; on hover.

Answer 4

Hiding through CSS is achieved by using either the "visibility" or the "display" attributes. Though both achieve similar results, it's useful to know the differences.

If you only want to hide the element but retain the space occupied by it, you should use:

#mybox:hover {
   visibility: hidden;
}

If you want to hide the element and remove the space occupied by it, so that other elements can take its space, then you should use:

#mybox:hover {
   display: none;
}

Also remember that IE6 and below do not respond to :hover for anything except A tags. In which case, you'll need some Javascript to change the classname:

document.getElementById('mybox').className = 'hide';

and define the "hide" class in CSS:

.hide { display: none; }