nicht angemeldet
Hi ich versuche Gerade einen Hover über eine CSS box zu machen.
Bis jetzt bin ich nur soweit gekommen:
http://mitglied.lycos.de/voodooview/selfhtml/selfhtmlshow.htm
Funktioniert zwar, das Problem ist aber das die erste box normal hovert, allerdings auch hovert wenn ich über die zweite box gehe.
Habe leider noch nicht so viel Ahnung von CSS und Javascript habe eigentlich nur versucht dieses beispiel auf mehrere Boxen anzuwenden:
http://codepunk.hardwar.org.uk/ajs29.htm
Hier ist mein source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynamic CSS Properties</title>
<style type="text/css">
#box1{
height:200px;
position: absolute;
left:10px;top:270px;
width: 200px;
border: solid #000000 3px;
background-color: #FFFFFF;
color: #000000;
padding: 10px;
-moz-border-radius:20px;
}
#box2{
height:200px;
position: absolute;
left:300px;top:0px;
width: 200px;
border: solid #000000 3px;
background-color: #FFFFFF;
color: #000000;
padding: 10px;
-moz-border-radius:20px;
}
#box3{
height:200px;
position: absolute;
top: 0px;
left: 300px;
width: 200px;
border: solid #000000 3px;
background-color: #FFFFFF;
color: #000000;
padding: 10px;
-moz-border-radius:20px;
}
</style>
<script language="JavaScript">
function change(box){
document.getElementById(box).style.backgroundColor = "#CEE3F6";
}
function change_back(box){
document.getElementById(box).style.backgroundColor = "#FFFFFF";
}
</script>
</head>
<body>
<div id="box1" onMouseOver="change('box1')" onMouseOut="change_back('box1')">
<h3>This is a dynamically styled box. Hover over this box to watch it change. (Doesn't work in Netscape 4.x or earlier.)</h3>
<div id="box2" onMouseOver="change('box2')" onMouseOut="change_back('box2')">
<h3>This is a dynamically styled box. Hover over this box to watch it change. (Doesn't work in Netscape 4.x or earlier.)</h3>
<div id="box3" onMouseOver="change('box3')" onMouseOut="change_back('box3')">
<h3>This is a dynamically styled box. Hover over this box to watch it change. (Doesn't work in Netscape 4.x or earlier.)</h3>
</body>
</html>
MudGuard