CSS Hover anderes Element ändern

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
~~m****r~~

15:44, 16.7.2012
Hi,

also ich bin ja wirklich kein Anfänger mehr in CSS, aber irgendwie stehe ich hier gerade auf dem Schlauch. Ich habe zwei Elemente A und B. Bei B:hover möchte ich, dass A seine background-color ändert. Ist soetwas in CSS überhaupt möglich? Ist ja sone Art Querverweis zwischen zwei html Elementen, die mit CSS angesprochen werden können. Nur wüsste ich nicht das es geht. Wenns nicht geht: Wie mach ich das dann mit nur HTML und CSS?

Der Grund ist n ganz simpler: Ich hab ne normale Navigation, in der ich mit ul und li eine Linkliste darstelle, die ich dann über float:left; formatiere und "schön" gestalte. Ich möchte, dass über die gesamte Navigation (100%width von body) unten ein border:thin solid black; besteht, allerdings bei jedem li der navigation bei li:hover eben der Border unten verschwindet. Wie mache ich das?

Dankeschön.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

~~g****e~~

18:31, 16.7.2012

Ganz einfach:

#element1 {
//ganz schön gemacht
}
#element2 {
//ganz schön gemacht
}
#element2:hover #element1 {
background-color: #FFFFFF;
}

http://lmgtfy.com/?q=css+hover+anderes+element+%C3%A4ndern

Liebe Grüße

copynpaste

copynpaste hat kostenlosen Webspace.
18:51, 16.7.2012
ggamee schrieb:
Ganz einfach:
```
#element1 {
//ganz schön gemacht
}
#element2 {
//ganz schön gemacht
}
#element2:hover #element1 {
background-color: #FFFFFF;
}
```
http://lmgtfy.com/?q=css+hover+anderes+element+%C3%A4ndern

Liebe Grüße
Aber soweit ich weiß nur, wenn #element1 sich in #element2 befindet:
```
<div id="element2">
<div id="element1">
</div>
</div>
```
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

18:59, 16.7.2012
Was aber nicht möglich ist ist, dass das Patent-Element etwas ändert weil beim Child ein :hover stattfindet.
Grund: mit CSS lassen sich keine Parents auswählen, sondern nur Childs.
Autor dieses Themas
~~m****r~~
19:13, 16.7.2012
copynpaste schrieb:
ggamee schrieb:
Ganz einfach:
```
#element1 {
//ganz schön gemacht
}
#element2 {
//ganz schön gemacht
}
#element2:hover #element1 {
background-color: #FFFFFF;
}
```
http://lmgtfy.com/?q=css+hover+anderes+element+%C3%A4ndern

Liebe Grüße
Aber soweit ich weiß nur, wenn #element1 sich in #element2 befindet:
```
<div id="element2">
<div id="element1">
</div>
</div>
```
Und genau das ist das Problem! B befindet sich nämlich nicht in A! Gibt es da einen CSS Workaround?
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

19:20, 16.7.2012
Also wenn es das gäbe würdest du es hier finden... aber das gibts leider nicht.

~~g****e~~

20:31, 16.7.2012

Tut mir leid, das stimmt natürlich, dass man nur children damit beeinflussen kann. Tut mir leid, dass ich das nicht genannt habe.
Ich dachte eigentich an so eine ähnliche Struktur:

<style type="text/css">
#element2 { display:none; }
#element4 { display:none; }
#element3 { width:250px; }
#element:hover #element2 { display:block; }
#element2:hover #element4 { display:block;float:right; }
</style>

<div id="element">Hier drauf
	<div id="element2">element11<br/>element21<br/>

		<div id="element3">element31
			<div id="element4">element12</div>
		</div>

	</div>

</div>

Damit kann man wunderbar Menüs aufbauen, find ich. Ansonsten wirst du wohl auf Javascript zurückgreifen müssen :-S

Liebe Grüße

~~h******g~~

23:22, 17.7.2012
CSS = Cascading Style Sheets
kaskadierend = von OBEN nach UNTEN
sollte eigentlich klar sein, dass das nicht geht.
snix

snix hat kostenlosen Webspace.

22:44, 22.7.2012
Da benutzt du am besten Javascript und dann schau unter onmouseover // onmouseenter // onmouseout (onmouseleave).

Gruß Snix
tys

tys hat kostenlosen Webspace.

16:49, 28.7.2012

snix schrieb:
Da benutzt du am besten Javascript und dann schau unter onmouseover // onmouseenter // onmouseout (onmouseleave).

Gruß Snix

Jap.. Dazu rate ich dir auch. Sowas ist mir nämlich schon öfters versehentlich passiert als ich ain normales hover machen wollte..
copynpaste

copynpaste hat kostenlosen Webspace.

19:15, 28.7.2012
Allerdings muss man immer dran denken, dass der Besucher der Seite Javascript im Browser deaktiviert haben könnte und somit nicht viel weiter als bis zur Startseite kommt..
Ich würde dir hier wirklich raten ggamee's Beispiel umzusetzen.
~~n******t~~

13:00, 29.7.2012

hm4-blog schrieb:
CSS = Cascading Style Sheets
kaskadierend = von OBEN nach UNTEN
sollte eigentlich klar sein, dass das nicht geht.
Ich glaub eher, dass sich das kaskadierend auf die Tatsache bezieht, dass Statements, die weiter oben stehen, von denen überschrieben werden, die weiter unten stehen und nicht auf Parent und Child.

Außerdem glaube ich, dass mittlerweile jeder so weit sein sollte und JavaScript aktiviert haben.
Versuch mal mit deaktiviertem JavaScript etwas in Facebook zu kommentieren oder so...
JavaScript zu deaktivieren, ist denke ich nicht mehr so aktuell.

Zu deinem Problem, ich würde dir raten, dass wenn du mit CSS fertig bist, dir JavaScript anzuschauen und dann auch jQuery (was mir sehr hilft bei meinen "Versuchen einer Website :D")

MfG
Dominic

EDIT: Ja mir ist da noch was eingefallen: http://www.w3schools.com/cssref/sel_gen_sibling.asp

Beitrag zuletzt geändert: 29.7.2012 13:07:28 von naturfit
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city