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.

Answer 1

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 2

Here is the simplest way to do it with CSS3:

#mybox:hover {
  color: transparent;
}

regardless of the container color you can make the text color transparent on hover.

http://caniuse.com/#feat=css3-colors

Cheers! :)