[html] how to hide the content of the div in css

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

I would say:

#mybox{_x000D_
  background:green;  _x000D_
}_x000D_
_x000D_
#mybox:hover{_x000D_
  color:transparent;_x000D_
}

<div id="mybox">_x000D_
  This text will disappear on hover  _x000D_
</div>

This will hide text, but of course, it still contains the text, but it is a tricky way to hide the text (make in invisible), but it will work well

What about opacity

#mybox:hover {
    opacity: 0;
}

sounds silly but font-size:0; might just work. It did for me. And you can easily override this with the child element you need to show.

This is a late answer but still, guess setting the color to transparent is the best option.

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

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! :)

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

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

#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.

Sorry to be 7 years late but this could be achieved by using the below:

.your-block{
    visibility: hidden;
    width: 0px;
    height: 0px;
}

This will keep the content on the page and won't occupy any space whereas display:none will completely hide the content.

Using the above code can be useful if you need to reference code in a div but don't need it to display.

Best way to hide in html/css using display:none;

Example

<div id="divSample" class="hideClass">hi..</div>
<style>
.hideClass
{display:none;}
</style>

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

There are many ways to do it:
One way:

#mybox:hover {
   display:none;
}

Another way:

#mybox:hover {
   visibility: hidden;
}

Or you could just do:

#mybox:hover {
   background:transparent;
   color:transparent;
}