✔ Mit :hover von DIV1 ein DIV2 ändern

[ray2mi]

Hallo Leute,

gibt es in CSS die Möglichkeit beim hovern oder focus eines elements wie bspw. input class="1", label class="1" oder div class="1" die Eigenschaften in einem anderen input class="2", label class="2" oder div class="2" zu ändern.

Noch mal ein kleines Beispiel.

Ich habe zwei Div Boxen.
Div 1
Div 2

Wenn ich mit dem Mauszeiger über Div 1 gehe, würde ich gerne das Hintergrundbild oder die Textfarbe vom Inhalt des Div 2 verändern.


Danke für eure Antworten.

 

[Sprint]

Genau dieses Problem gab es hier schon einmal und ich hatte damals hier http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm die Lösung gefunden. Ist ganz leicht anzupassen.

 

[ray2mi]

mhh, ich glaube das ist nicht genau das was ich meinte. In dem Link sind die Div ineinander ich würde den effekt aber gerne bei getrennten divs einblenden lassen.

<div class="menu">
<div class="div1">TEXT1</div>

<div class="div2">TEXT2</div>
</div>
Verstehe gerade nicht wie man das damit machen könnte

 

[hela]

Hallo,

m.E. kann mit CSS nur auf Kindelemente und auf das nächste Geschwisterelement zugegriffen werden. John Resig hat das im Vergleich zu XPath in seinem Blog gezeigt: http://ejohn.org/blog/xpath-css-selectors/

Hier auch eine Demo: http://www.tutorials.de/css/377089-nach-hover-event-unterelement-veraendern.html#post1949354

 

[ray2mi]

Oh cool! Das ging schnell. Vielen Dank für eure Hilfe!!

 

[CPoly]

Was auf der Vergleichsseite fehlt, ist die Tilde "~". Damit kommt man nicht nur an das direkte Geschwisterelement, sondern alle.

Also falls deine Markup nicht genau dem entspricht, was du oben gepostet hast, sondern z.B. zwischen .div1 und .div2 noch anderen Elemente sind:

.div1:hover ~ .div2 {
	font-weight:bold;
}

 

[ray2mi]

Aber um wirklich das hier zu realisieren bräuchte ich java oder wie?


Hover über TEXT1 ändert color of TEXT2
<div class="menu">
<div class="div1">TEXT1</div>

<div class="div2">TEXT2</div>
</div>

 

[tombe]

Das geht so wie es dir CPoly oben geschrieben hat.

Einziger Haken ist es geht immer nur von oben nach unten, nie von unten auf ein vorheriges Element.

<style type="text/css">
.div1:hover ~ .div2 { color:#FF0000; }
</style>

<div class="div1">TEXT1</div>
<div class="div2">TEXT2</div>

Das hier geht nicht, weil div2 hinter div1 steht:

.div2:hover ~ .div1 { color:#FF0000; }

 

[hela]

Wenn ich mit dem Mauszeiger über Div 1 gehe, würde ich gerne das Hintergrundbild oder die Textfarbe vom Inhalt des Div 2 verändern.

So ist es auch möglich und dieser Fall ist in der o.g. Demo enthalten:

div.div1:hover + div.div2 {font-weight:bold; color:red;}