Есть ли способ скрыть содержимое div, но не сам div?

Question

Итак, вот что я хочу сделать в своей самой упрощенной форме. Я хочу, чтобы на странице появилось окно, и когда вы наводите на него курсор, это содержимое видно, иначе они скрыты. Так, например, скажем, у нас есть это:

<style type="text/css"> 
#box { 
    background-color:red; 
    width:100px; 
    height:100px; 
} 
</style> 

<div id="box"> 
    <img src="smileyface.png" /> 
</div> 

Большую часть времени, изображение скрыто, и это выглядит как красное поле, но когда ДИВ завис над изображением появляется. Есть ли способ сделать это с помощью CSS, а не javascript. Я знаю, что с javascript мы могли бы просто удалить элемент и добавить его обратно, когда мы идем, но я просто хочу показать его и скрыть. Мысли?

* Должен быть совместим с IE 8, потому что я обжора для наказания. *

Answer 1

Вы можете использовать : парить на любом теге вы хотите:

#box { 
    background-color:red; 
    width:100px; 
    height:100px; 
} 

#box:hover { 
    background-image: src('smileyface.png'); 
} 

Answer 2

Это довольно легко. Просто измените свойство отображения изображения, когда #box завис.

#box > img { 
    display: none; 
} 

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