Astuce javascript

Pour obtenir un contenu caché qui ne s'affiche que lors d'un 'mouseover'.

<style type="text/css">
  #div1, #div2, #div3 { 
    visibility: hidden; 
  }
</style>
<script>
  function show(id) {
    document.getElementById(id).style.visibility = "visible";
  }
  function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
  }
</script>

<div onMouseOver="show('div1')" onMouseOut="hide('div1')">
  <div id="div1">Div 1 Content</div>
</div>
<div onMouseOver="show('div2')" onMouseOut="hide('div2')">
  <div id="div2">Div 2 Content</div>
</div>
<div onMouseOver="show('div3')" onMouseOut="hide('div3')">
  <div id="div3">Div 3 Content</div>
</div>

Démonstration :

Div 1 Content

Div 2 Content

Div 3 Content