Tutorial HTML, CSS u. PHP - Forum

von **whizzywig** » Sonntag 25. September 2011, 21:27

hallo,

folgende frage:

kann man mit dem befehl "hover" auch auf andere elemente zugreifen?
ein bsp.: angenommen ich habe 2 buttons. wenn ich meine maus über den einen "hovere" möchte ich, dass nicht dieser button sondern der andere vergrößert oder irgendwie sonst verändert angezeigt wird.
ist das möglich, wenn ja wie?

viele grüße, whizzywig

von **lauras** » Sonntag 25. September 2011, 22:25

Huhu,

das funktioniert, wenn das Element was du ansprechend möchtest innerhalb des gehoverten liegt (einfachster Fall)- benutzt man z.B. bei Fold-Out-Menüs. Beispiel (mal komplett aus dem Zusammenhang gerissen):

Code: Alles auswählen: ul li:hover ul { left: auto }

Alles andere ist wesentlich schwieriger, aber meist machbar mit den Kombinatoren (schau mal hier etwas weiter unten auf der Seite). Beispiel:
HTML:

Code: Alles auswählen: <div id="eins">Text1</div> <div id="zwei">Text2</div>

CSS:

Code: Alles auswählen: div#zwei { color: black;} div#eins:hover + div#zwei { color: red; }

Macht rote Schrift im div#zwei, wenn der div#eins gehovert wird - allerdings funktionieren diese Selektoren nicht in allen Browsern (am besten vorher checken, nicht dass es böse Überraschungen gibt). Ansonsten bleibt die Alternative JavaScript (da am besten mal googlen).

Grüße
Laura

von **Sarkkan** » Sonntag 25. September 2011, 22:35

lauras hat geschrieben:Alles andere ist wesentlich schwieriger, aber meist machbar mit den Kombinatoren (schau mal hier etwas weiter unten auf der Seite). Beispiel:
HTML:
Code: Alles auswählen
<div id="eins">Text1</div> <div id="zwei">Text2</div>

CSS:
Code: Alles auswählen
div#zwei { color: black;} div#eins:hover + div#zwei { color: red; }

Macht rote Schrift im div#zwei, wenn der div#eins gehovert wird - allerdings funktionieren diese Selektoren nicht in allen Browsern (am besten vorher checken, nicht dass es böse Überraschungen gibt). Ansonsten bleibt die Alternative JavaScript (da am besten mal googlen).

Grüße
Laura

Diesen Selektor kann man eigentlich ohne schlechtes Gewissen verwenden, da ihn selbst der IE seit der Version 7 unterstützt.
Noch weiter würde ich für den Internet Explorer nicht runter gehen, ich meine selsbt die Version 7 ist schon über 5Jahre(!) alt, Version 6 sogar über 10Jahre.
Übrigens hat Google im August dieses Jahres den Support für den IE7 eingestellt, was nicht mehr als richtig ist wie ich finde

von **lauras** » Sonntag 25. September 2011, 22:39

Grade beim testen festgestellt: Es fehlt ein Selektor, der alle Nachbarelemente auswählt, und nicht nur die nachfolgenden im Quelltext - wenns den gäbe, könnte man sehr geile Effekte machen.

Zum Testen mal der Code hier, daran sieht man ganz gut wies funktioniert

Code: Alles auswählen: <!DOCTYPE html> <html> <head> <style type="text/css"> div { height: 50px; width: 50px; background-color:black; float: left; } div:hover ~ div { background-color: white; } </style> </head> <body> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> <div>Text</div> </body> </html>

von **Sarkkan** » Sonntag 25. September 2011, 22:52

lauras hat geschrieben:Grade beim testen festgestellt: Es fehlt ein Selektor, der alle Nachbarelemente auswählt, und nicht nur die nachfolgenden im Quelltext - wenns den gäbe, könnte man sehr geile Effekte machen.

Es gibt keinen direkten Selektor, aber eine Technik.

Code: Alles auswählen:  <div id="mutter"> <div></div> <div></div> <div></div> </div> /** CSS CODE **/ /* Erst färben wir alles */ #mutter:hover div { background: red; } /* Dann definieren wir eine Ausnahme */ #mutter div:hover { background: green; }

von **whizzywig** » Montag 26. September 2011, 09:24

danke für die recht ausführlichen antworten, funktioniert super

Tutorial HTML, CSS u. PHP - Forum

hover

hover

Re: hover

Re: hover

Re: hover

Re: hover

Re: hover

Wer ist online?