Frage von Frager2111, 37

CSS Element nach hover weiterhin anzeigen?

Hallo liebe Community, ich habe eine Frage zur CSS-Programmierung. Hier erstmal mein aktueller Code:

#element1{
    display: none;
}
#element2:hover~#element1{
    display: block;
}

Zum Verständnis: Ich habe zwei Elemente auf der Website. Wenn man mit der Maus über element2 drüber geht, wird element1 angezeigt. "Verlässt" man nun element2, so verschwindet element1 auch wieder. Logisch, oder? :-)

Jetzt wäre meine Frage: Wie muss der Code aussehen, damit element1 (welches bei einem hover von element2 dargestellt wird) nach dem Hover für immer anzeigt wird und nicht wieder verschwindet.

Viele Grüße, Frager2111

Antwort
von surbahar53, 15

Ich sehe das so wie @n0b0dyelse, mit Javascript geht das am elegantesten. Der CSS:hover allein funktioniert z.B. auf dem Touchscreen eines Handys sowieso nicht.

Antwort
von n0b0dyelse, 27

Meines Wissens nach ist das nicht möglich mit CSS, solange du nichts anklickst (via versteckte Checkbox).

Dazu kannst du jedoch JavaScript verweden:
entwerder in HTML direkt bei deinem element:

<div id='element1'></div>
<div id='element2' onmouseover='document.querySelector("#element1").style.display = "block"' ></div>

oder in einem "<script>" tag am ende des "bodys":

 document.querySelector("#element2").addEventListener("mouseover", function(){
document.querySelector("#element1").style.display = "block";
});
Kommentar von Frager2111 ,

Leider kann ich bei dem Programm nur CSS einfügen... gibt's da Möglichkeiten?

Kommentar von triopasi ,

Meines Wissens nach, gibt's da keinen besseren Weg.. Außer du schaust mal ob du das zB mit der versteckten checkbox iwie hinpfuschen kannst...

Antwort
von ilovetoro, 24

Mit dem CSS dass du da hast, werden ältere Browser gar nichts machen - ist dir hoffentlich bewusst? Du kannst das mit "transition delay" bewältigen.

Hoffe du kannst englisch lesen, dann ist hier die Antwort:
http://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-un...

Ansonsten google mal, z.B. "CSS hover effect permanent"

Kommentar von Frager2111 ,

Ist mir nicht bewusst :-) Was gibt's denn für Alternativen?

Kommentar von ilovetoro ,

Volles Beispiel mit HTML und CSS, funktioniert auch in den meisten älteren Browsern:  http://jsfiddle.net/nAg7W/1/

Antwort
von kuechentiger, 6

Das geht mit :target
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target

Keine passende Antwort gefunden?

Fragen Sie die Community