Dale Russell: onMouseover/-out wird zu oft aufgerufen

Beitrag lesen

SELF-Forum

onMouseover/-out wird zu oft aufgerufen

Dale Russell
– Informationen zu den Bewertungsregeln

Wie unter dem Thema "Elemente weich ein-/ausblenden" erläutert wollte ich ein Menü weich einblenden.
Jetzt habe ich einen Code geschrieben der das auch recht ansprechend macht. Aber mir scheinen die Event-Handler etwas zu oft aufgerufen zu werden.

Denn der span-Teil wird nicht nur bei Betreten und Verlassen des umschließenden divs (also alles mit grauem Hintergrund) ein-/ausgefadet, sondern auch wenn vom p-Bereich auf den Span-Bereich gewechselt wird. Und auch beim Wechsel zu und von den Links.

Unten hänge ich mal einen minimalisierten Testcase an. Vielleicht kann mir jemand auf die Sprünge helfen, wo mein Denkfehler steckt.

Dale

---

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>einblend-Test</title>

<style type="text/css">
#switch {position:absolute; background-color:lightgrey;}
div#switch span {display:none;}
/* div#switch:hover span {display:block;}*/
</style>

<script type="text/javascript">
var curop = 0.1;

function showswitch()
{
blendin();

var el = document.getElementById("switch").getElementsByTagName("span")[0];
el.style.display = "block";
}

function blendin()
{
var el = document.getElementById("switch");

if (curop < 1)
{
  curop += 0.1;
  el.style.opacity = curop;
  window.setTimeout("blendin()", 100);
}

}

function hideswitch()
{
var el = document.getElementById("switch").getElementsByTagName("span")[0];

el.style.display = "none";
curop = 0.1;
}

</script>
</head>

<body>
<div id="switch" onMouseover="showswitch();" onMouseout="hideswitch();">
<p>Text</p>
<span>
Style: <a href="link1.html">Link 1</a> &#124; <a href="link1.html">Link 2</a> &#124; <a href="link1.html">Link 3</a>
</span>
</div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln