title: how to hide the content of the div in css
body: <p>I have this html code</p>
  
  <pre><code>&lt;div id="mybox"&gt; aaaaaaa &lt;/div&gt;
  </code></pre>
  
  <p>and this is my css</p>
  
  <pre><code>#mybox{
     background-color:green;
  }
  
  #mybox:hover{
     background-color:red;
  }
  </code></pre>
  
  <p>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 <code>#mybox:hover</code> but I don't know the code</p>
  
  <p>Thanks in advance for help</p>