Javascript/mouseover bei verschachtelten Elementen
Zur Navigation springen
Zur Suche springen
mouseover bei verschachtelten Elementen
http://forum.de.selfhtml.org/archiv/2007/2/t146689/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<h tml>
<head>
<m eta http-equiv="Content-Type" content="text/html; charset=utf-8">
<scr_ipt type="text/javascript">
function log (message) {
if (typeof log.t == "undefined")
log.t = document.getElementById("t");
log.t.value = log.t.value + message + "\n";
}
if (window.Node && Node.prototype && !Node.prototype.contains) {
Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16);
};
}
function over (event) {
event = event || window.event;
var fromElement = event.relatedTarget || event.fromElement || false;
if (!navigation.contains(fromElement)) {
log("echter mouseover");
}
}
function out (event) {
event = event || window.event;
var toElement = event.relatedTarget || event.toElement || false;
if (!navigation.contains(toElement)) {
log("echter mouseout");
}
}
window.onload = function () {
navigation = document.getElementById("menu");
navigation.onmouseover = over;
navigation.onmouseout = out;
};
</script>
<style type="text/css">
#menu { margin: 0; padding: 0; position: absolute; top: 50px; left: 600px; list-style-position: inside; }
#menu li { margin: 0; padding: 0; background-color: #c0c0c0; width: 150px; padding: 5px; }
</style>
</head><body id="body">
<ul id="menu">
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
<li>Menüpunkt 5</li>
<li>Menüpunkt 6</li>
</ul>
<p id="p"><textarea id="t" cols="60" rows="25"></textarea></p>
</body>
</html>