Hover Effekt funktioniert nicht, warum?
Also ich habe folgendes Problem. Ich möchte, dass ein Listenelement sichtbar wird, wenn man über die komplette Liste mit dem Mauszeiger fährt. Allerdings funktioniert das einfach nicht und ich weiß nicht warum. Habe es auch schon mit display probiert und ohne der ul eine Klasse zuzuordnen. Hier mal der html-Code:
<ul class="effekt2">
<li>Badeanzug</li>
<li>Handtuch</li>
<li>essen und trinken</li>
<li id="info2">Und natürlich Freude :D</li>
</ul>
Und das wäre jetzt der css-Code:
.effekt2:hover + #info2{
visibility: visible;
}
#info2{
visibility: hidden;
}
Ich weiß leider nicht genau was ich ändern soll und bin ziemlich planlos. Vielen Dank im Voraus für eure Hilfe^^
1 Antwort
Das + repräsentiert den Nachbarselektor. Das heißt, das Element nach dem + muss ein direkter nachfolgender Nachbar des Elemnts vor dem + sein. Das ist bei dir nicht der Fall, das li-Element ist ein Kindelement des ul.
Verwende einen Nachfahrenselektor:
.effekt2:hover #info2 {
Hat funktioniert danke. Hab da nicht mehr dran gedacht.