nicht angemeldet
Hover über eine CSS Box erzeugt komische Vererbung
1 0 
MudGuard
Hover über eine CSS Box erzeugt komische Vererbung
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>
-
Hi,
Hi ich versuche Gerade einen Hover über eine CSS box zu machen.
Und warum nimmst du dafuer JavaScript?
:hover in CSS tut's auch. (Aeltere IE koennen fuer optischen Schnickschnack idR. vernachlaessigt werden.)
Funktioniert zwar, das Problem ist aber das die erste box normal hovert, allerdings auch hovert wenn ich über die zweite box gehe.
Nein, dein Problem ist, dass du ueberhaupt keine "zweite Box" hast.
<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')">Dieser Div ist Kindelement des ersten.
<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')">Dieser Div ist Kindelement des zweiten, und Nachfahre des ersten.
Btw: Koche bitte keine Div-Suppe. Die Divs sehen in deinem Beispielcode mehr als ueberfluessig aus - du kannst genauso gut (bzw. besser) gleich die Ueberschriften formatieren.
MfG ChrisB
-
Jau danke jetzt gehts.
Ich hab extra eine Lösung in Javascript gesucht, da ich gelesen hatte das der IE das sonst nicht macht.
Werde in zukunft versuchen keine DIV suppe mehr zu kochen schönen Sonntag noch;)
-
-
Hi,
<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>Wenn Du die divs auch (an geeigneter Stelle) wieder schließen würdest, wär auch das Problem weg.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Autsch. Da ich anfänger bin hab ich irgendwas kompliziertes vermutet.
Besten Dank jetzt gehtsFrede
-