[FRAGE] Problem mit sidebar/onmouseover

[InfoPengu]

Heyho Gemeinde,
ich hab ein Problem mit meinem JavaScript.
Momentan hab ich das hier:

<script type="text/javascript">
function show_sidebar()
{
document.getElementById('sidebar').style.visibility="visible";
}

function hide_sidebar()
{
document.getElementById('sidebar').style.visibility="hidden";
}
</script>


<div id="wrapper" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()">
  <img src="irgendein.jpg" width="80px" height="30px">
  <div id="sidebar">irgendwas</div>
</div>

Folgendes soll der Script umsetzen: Wenn die Maus über das gewünschte Objekt fährt, soll die ein Feld erscheinen. (Inhalt: Bild, Infobox oder ähnliches) Das Feld soll so lange geöffnet bleiben, wie sich die Maus über dem Objekt oder dem Feld selbst bewegt.

Das klappt nun prinzipiell auch... Aber zum Problem:
(1.)Das Feld erscheint beim Laden der Seite sofort, auch wenn die Maus das Objekt noch nicht berührt hat. Es verschwindet erst, wenn man die maus darüber bewegt und wieder wegzieht.

(2.)Wenn das Objekt nun zum Beispiel eine Zahl in einem Kalender ist, so wird die komplette Formatierung des Kalenders aufgehoben. So ist das Feld theoretisch immer da, auch wenn man es nicht sieht.

Ich hoffe meine Probleme können nachvollzogen und vielleicht auch gelöst werden. Bei Unklarheiten kann ich auch noch Screenshots ergänzend hinzufügen.

Vielen Dank schon mal!:icon7:

 

[j-l-n]

(1.)Das Feld erscheint beim Laden der Seite sofort, auch wenn die Maus das Objekt noch nicht berührt hat. Es verschwindet erst, wenn man die maus darüber bewegt und wieder wegzieht.

Natürlich, es steht ja nirgendwo, dass es ausgeblendet sein soll...

(2.)Wenn das Objekt nun zum Beispiel eine Zahl in einem Kalender ist, so wird die komplette Formatierung des Kalenders aufgehoben. So ist das Feld theoretisch immer da, auch wenn man es nicht sieht.

Versteh ich nicht, hier wäre ein Screenshot zur Erläuterung gut.

Hier das Ganze mal "in sauber":

<div id="wrapper">
	<img src="irgendein.jpg" width="80px" height="30px">
	<div id="sidebar" style="display:none;">irgendwas</div>
</div>

<script>
	var wrapper = document.getElementById("wrapper"),
		sidebar = document.getElementById("sidebar");
	wrapper.onmouseenter = function(){
		sidebar.style.display = "";
	}
	wrapper.onmouseleave = function(){
		sidebar.style.display = "none";
	}
</script>