html - Is there any way to hide a div's contents but not the div itself? -

so here's im looking in simplified form. want have box appear on page , when hover on it, it's contents visible, otherwise hidden. example let's have this:

<style type="text/css"> #box {     background-color:red;     width:100px;     height:100px; } </style>  <div id="box">     <img src="smileyface.png" /> </div> 

most of time, image hidden , looks red box, when div hovered on image appears. there way css , not javascript. know javascript remove element , add in go, want show , hide it. thoughts?

*must ie 8 compliant because i'm glutton punishment.*

this quite easy. change display property of image when #box hovered

#box > img {   display: none; }  #box:hover > img {   display: block; }