Sichtbar/unsichtbar Hoverefekt

[KKoch]

Guten morgen,
Ich suche nach einem Script.
Ich habe jetzt ziemlich lange gesucht und nichts gefunden.

Es handelt sich um folgendes:

Ich fahre mit der Maus über einen Button, in dem Moment wird der Inhalt eines <div> sichtbar. Verlasse ich den Button bleibt der div sichtbar, so lange bis ich über einen anderen button fahre, in dem Moment wird der zuvor aktivierte <div> unsichtbar und der neue wieder sichtbar.

Ich eines das fast mein Problem löst, aber eben nur fast. Das der vorherige <div> unsichtbar wird fehlt noch.

Hier mein code:

code.js:
function aktiv(elementName) {
 if (document.getElementById) {
  if (document.getElementById(elementName).style.visibility != "visible") {
   document.getElementById(elementName).style.display = "block";
   document.getElementById(elementName).style.visibility = "visible";  }
  else {
   document.getElementById(elementName).style.display = "none";
   document.getElementById(elementName).style.visibility = "hidden";
  }
 }
}

design.css:
#musik, #kunst,{display: none;}

index.html:

<div class="kunst"><a href="#" onmouseover="aktiv('kunst');"><img src="img/headmen/kunst.gif" border="0"></a></div>
<div class="musik"><a href="#" onmouseover="aktiv('musik');"><img src="img/headmen/musik.gif" border="0"></a></div>

<div id="musik"> inhalt 1 </div>

<div id="kunst"> inhalt 2</div>

vielleicht kann mir hier jemand helfen.
Gruß