Multiples Hovering...

[peti]

Hallo,

ich habe 2 Buttons (But1 und But2). Was ich genau machen will, ist folgendes:

Wenn die Maus ueber But1 hovered, dann soll sich But2 aendern. Wenn Die Maus ueber But2 hovert, soll sich But 2 aendern. Also kurz gesagt, But1:hover soll den gleichen effect wie But2:hover haben.

Wie loese ich das? Bin gerad am verzweifeln :(  Wichtig ist, dass das ohne JS geloest wird...

  
#but1 { display:block; width: 168px; height:436; background-image:url(Bilder/impressum.jpg);}  
#but1:hover{display:none;}  
  
#but2 { display:block; width: 168px; height:48px; background-image:url(Bilder/impressumnormal.jpg);}  
#but2:hover { background-image:url(Bilder/impressumhover.jpg);}  

mfg

Pete

[Felix Riesterer]

Liebe(r) peti,

Wenn die Maus ueber But1 hovered, dann soll sich But2 aendern.

das geht ohne JavaScript nur dann, wenn But2 ein Kindelement von But1 ist. Sonst nicht. Solltest Du reguläre Klickbuttons (also <input>- oder <button>-Elemente) einsetzen, dann ist das mit CSS alleine nicht möglich.

Liebe Grüße,

Felix Riesterer.

[peti]

Hast du vielleicht ein Beispiel? Nein nein, waeren wenn dann sowas:

  
<a id="but1" href="#"></a><a id="but2" href="#"></a>  

MfG
Pete

Liebe(r) peti,

Wenn die Maus ueber But1 hovered, dann soll sich But2 aendern.

das geht ohne JavaScript nur dann, wenn But2 ein Kindelement von But1 ist. Sonst nicht. Solltest Du reguläre Klickbuttons (also <input>- oder <button>-Elemente) einsetzen, dann ist das mit CSS alleine nicht möglich.

Liebe Grüße,

Felix Riesterer.

[Marc]

Hallo peti,

Wenn die Maus ueber But1 hovered, dann soll sich But2 aendern. Wenn Die Maus ueber But2 hovert, soll sich But 2 aendern. Also kurz gesagt, But1:hover soll den gleichen effect wie But2:hover haben.

Mein Rat: mach das nicht. Wenn es trotzdem sein muss, mach es wie folgt:

Da die "Buttons" feste Größen ahben, musst Du eigentlich nur dafür sorgen, dass du eine Hintergundgrafik so positionierst, dass sie hinter beiden "Buttons" liegt.

Je nachdem welcher Button gehovert wird, lädst Du eine andere Hintergrund-Grafik, die den Effekt erzeugt, den du dir wünschst - ob das wirklich alles so klappt, wie du willst, weiß ich nciht, weil ich nciht weiß, ob cih dich richtig verstanden ahbe. vielleicht musst du auch noch ein bißchen mehr tricksen, z. B. indem Du bveide Buttons in ein div legst und dem div einen hovereffekt verpasst und nur einem button (der ja eine Ebene höher liegt als das DIV) - so erweiterst du deine Möglichkeiten noch...

Zum Beispiel so: Maus über dem ersten Button (dadurch den hover-Effekt des DIVS ausgelöst, aber nciht den des Buttons): Effekt 1

Maus über dem zweiten Button: hover-Effekt 1 wird ausgelöst und hover-Effekt 2. Da der Hintergrund des Buttons den Hintergrund des DIVs überdeckt, kannst du das dann anders aussehen lassen. Da Button2 kleiner als das umgebenden DIV ist, ändern sich scheinbar beide Button - geht natürlich auch umgekehrt...

Viele Grüße,
Marc.

[Peti]

Was waere denn eine/ die saubere Loesung?

Gruß,
Pete

[Marc]

Hallo,

Was waere denn eine/ die saubere Loesung?

Wenn man durch eine optische Rückmeldung angezeigt bekommt, auf welchem Button man gerade mit der Maus ist - die anderen Inhalte der Seite sollten sich nicht ändern - erst dann, wenn man da mit der Maus drüber fährt. Der hover-Effekt soll ja sagen: "Gut getroffen, jetzt kannst du klicken!"

Viele Grüße,
Marc.

[MudGuard]

Hi,

#but1 { display:block; width: 168px; height:436; background-image:url(Bilder/impressum.jpg);}
#but1:hover{display:none;}

Erstmal greift das erste Ruleset. Das Element hat eine gewisse Breite (die Höhe ergibt sich aus dem Inhalt, da bei height ein ungültiger Wert steht).

Bewegt man die Maus über das Element, gilt das zweite Ruleset - aufgrund der höheren Specificity wird display:block durch display:none überschrieben.

Dadurch wird das Element ausgeblendet. Das wiederum führt dazu, daß die Maus sich nicht mehr über dem (jetzt ja verschwundenen) Element befindet. Damit gilt das zweite Ruleset nicht mehr. display erhält also wieder den Wert block.

Das Element wird also wieder eingeblendet.

Wenn der Mauszeiger nicht bewegt wurde, befindet er sich jetzt wieder über dem Element.
Es gilt also das zweite Ruleset, wodurch das Element wieder ausgeblendet wird. Damit ist die Maus nicht mehr drüber, es wird wieder eingeblendet, wodurch die Maus wieder drüber ist, was zum Ausblenden führt, womit die Maus nicht mehr drüber ist, also Einblenden, Maus wieder drüber, Ausblenden, Einblenden, Aus, Ein, Aus, Ein, Aus, epileptischer Anfall des Users, Aus, Ein, Aus, Ein, Aus, Ein ...

cu,
Andreas

[Steel]

Hiho!

Es gilt also das zweite Ruleset, wodurch das Element wieder ausgeblendet wird. Damit ist die Maus nicht mehr drüber, es wird wieder eingeblendet, wodurch die Maus wieder drüber ist, was zum Ausblenden führt, womit die Maus nicht mehr drüber ist, also Einblenden, Maus wieder drüber, Ausblenden, Einblenden, Aus, Ein, Aus, Ein, Aus, epileptischer Anfall des Users, Aus, Ein, Aus, Ein, Aus, Ein ...

Schöner kann man das kaum sagen.