CSS :hover anderes Element wählen?

Hallo,

Ich bin mir nicht sicher ob sich hier jemand mit auskennt aber ich probier es trotzdem mal.

Also vor kurzen hab ich mit html und css angefangen, jetzt habe ich eine <ul>(Element2) erstellt und darunter noch eine weitere <ul>(Element2) : sprich, wenn man mit dem cursor daruf geht (:hover) so öffnet sie sich.

Was ich machen wollte ist, wenn man auf der zweiten <ul> drauf ist so soll die erste eine andere Farbe bekommen, sodass man erkennt auf welcher man sich gerade befindet.

Eigentlich müsste es doch so gehen

Element2:hover > Element1 {

color: red;

}

Normal funktioniert das ja auch bei anderen Sachen.

Das Zeichen ">" bedeutet doch, dass dann auf dieses Sache zugegriffen wird?

Answer 1

[LeLuke]

Also ja das geht wenn ich richtig verstanden habe.

Also dein html sieht ungefähr so aus ?

• Menu


• Menu


• Menu


• Menu

Dann kannst du in html deine unteren menüpunkte so gestalten:

nav#menu ul li {
color: white
}

nav#menu ul li ul li {
color: black
}

nav#menu ul li:hover > a{
color: red
}

Bin mir jetzt nicht ganz sicher.
Falls ich wieder zuhause komme kann ich es dir genauer sagen

LG Lukas

Comments

[760Jonas]

Danke dir

Answer 2

[tavkomann]

Wie sieht dein bisheriger Code aus?

Das Zeichen ">" bedeutet doch, dass dann auf dieses Sache zugegriffen wird?

Das ist selektiert einfach nur Elemente mit einem bestimmten Elternelement. „div > p“ selektiert beispielsweise jeden Absatz, welcher ein direktes Kindelement eines divs ist.

Answer 3

[Husar22]

<ul id="el1" onmouseover="changeElTwo()">Bla1</ul>

<ul id="el2">Bla2</ul>

<script>

function changeElTwo() {

  document.getElementById("el2").style.backgroundColor = "blue";

}

</script>

Das geht auch ohne, aber so ist es am einfachsten zu verstehen.

Comments

[760Jonas]

Danke für die schnelle antwort :D

Aber ich möchte es gerne ohne JavaScript probieren, weil dann hätte ich eig. auch die ganze dropdown Sache damit machen können.

Weißt du wie das ohne funktioniert?

Also ich weiß ja jetzt, dass man halt nur die kind-elemente von den eltern anspricht.

Wenn ich über das kind-element hover, dann würde ich es gerne so machen, dass das eltern-element eine andere farbe bekommt.

[Husar22]

Schau mal hier nach: https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling

[Husar22]

Und hier steht auch was dazu, wieso welches Zeichen benutzt wird: https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling

[Husar22]

Sorry, meinte das hier: https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Answer 4

[onlinefranzN]

Hallo,

Du solltest nth-child benutzen.

	<ul>
		<li> hi Franz ul 1 </li>		
	</ul>

	<ul>
		<li>hi Franz ul 2</li>

	</ul>

	<style type="text/css">

	ul:nth-child(2):hover {  
		color: red;
	}

	</style>

achso nth-child(2), weil wir wollen der zweiter haben! es kann auch nth-child(3) ... dann :hover dazu :D

LG

Franz | 15

Comments

[760Jonas]

War vllt es dumm formuliert.

Hab ich vllt nicht richtig erwähnt. Aber ich meint eig, dass die zweite ul in der ersten mit drin ist.

Answer 5

[Dory1]

Mit dem Kind-Selektor (>) kannst du alle Kind-Elemente auf der ersten Ebene des Eltern-Elements ansprechen.

Angenommen du hast folgendes HTML

<div class="eltern-element">
   <div class="kind-element"></div>
   <div class="kind-element"></div>
   <div class="kind-element">
       <div class="kind-element"></div>
   </div>
</div>

so könntest du die 3 unmittelbaren Kind-Elemente wie folgt ansprechen:

.eltern-element > .kind-element { ... }

Beachte: Das unterste, vierte Kind-Element, welches in einem anderen Kind-Element verschachtelt ist, wird hier nicht selektiert. Um wirklich alle Kind-Elemente anzusprechen müsstest du den Selektor wie folgt schreiben

.eltern-element .kind-element { ... }

Comments

[760Jonas]

Ja stimmt, davon hab ich schonmal gelesen.

Weißt du auch ob man das iwie andersherum machen kann. Also vom kind-element zum eltern-element wechseln kann?

Oder nur so, dass man dann das kind-element anspricht?

[Dory1]

@760Jonas

Es gibt leider keine Möglichkeit vom Kind-Element ausgehend das Elternelement zu beeinflussen. CSS funktioniert nur in eine Richtung :)