CSS Element nach hover weiterhin anzeigen?

4 Antworten

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";
});

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

0
@Frager2111

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...

0

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-unhovering

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

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.

HTML + CSS fade out -> bester Weg?

Hey. Ich wollte heute so eine Art ToastMessage.js schreiben. Der Toast soll sowas sein wie in Android. Ich habe es auch ziemlich gut geschafft, nur halt ohne fade. Mein Toast ist ein DIV mit einem SPAN darin. Das DIV Element ist von der position her FIXED. Was ist eurer Meinung nach der beste weg, es unsichtbar zu machen mit fading?

Also ich habe versucht (habe den DIV mit einer transition versehen):

DISPLAY: NONE zu BLOCK -> es fadet nicht, einfach weg.

VISIBILITY: HIDDEN zu VISIBLE -> es fadet nicht, bleibt die 0.5s Transition am Bildschirm und verschwindet dann.

OPACITY: 0 zu 1 -> naja hat geklappt, allerdings nicht so toll, da kann man keinen Butten dahinter drücken, weil ich es immer im hintergrund habe.

Ich will es womöglich OHNE CSS @keyframes machen. Das stört mich, auch wenn es möglicherweise besser wäre. Ich habe einfach im javascript eine funktion, die macht das hier:

element.style.display = "block" bzw. opacity oder visibility.

Danke.

...zur Frage

text-decoration:none; Der Unterstrich bei Hyperlinks verschwindet trotzdem nicht?

Ich versuche verzweifelt den Unterstrich wegzubekommen bei meinen Hyperlinks.

CSS .links li { display: inline-block; margin: 0 10px; padding: 20px; padding-left: 200px; text-decoration: none; }

HTML

  • Haar
  • Körper
  • Im Ausverkauf
  • Bestseller
...zur Frage

css vertikales menü aufklappbar nach unten weg wie geht das?

hallo ich möchte gerne in css html und wenn es sein muss auch js ein menü programmieren.Das untermenü soll sich nicht nach rechts oder links wegklappen wie überall im internet beschrieben sondern nach unten. so weit so gut so weit binn ich auch schon aber jetz klapt sich das untermenü über die obermenüpunkte auf wie bekomme ich das hin , dass die nicht passirt und die obermenüpunkte nach unternrutschen ? mein 2 poblem ist das man nicht auf die untermenüpunkte darufdrücken kann were net wenn sich den code jemand mal ansehen kann ich schetze das ist wegen den hover aber ich weis auch nicht wie ich das anders machen soll

nav{
    position:fixed;
    position: absolute;
    top:10.5em;
    left:12em;    
    display:block;
    height:2.5em;
    text-align:left;
    
    
}     

nav li:hover #sub{
    display: block;  
    position:absolute;    
    
   }
   
  nav ul li:hover #sub{
    left:9.375em
    
  } 


nav ul {
    display:block;
    list-style: none;
    margin: 0em;
    padding: 0em;
}

nav ul li {
    position:relative;
    display:block;
    margin: auto;
    
}
nav ul li a {
    color:green;
    font-size: 1.125em;
    line-height:1.5em;
    margin: 0em;
    padding: 0em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}

nav ul li a:hover {
    border-bottom: 0.15em solid #E7590B;
}
nav ul li a.active {
    border-bottom: 0.15em solid #E7590B;
}        

#sub{
position: absolute;
display: none;
    
}


#sub li a{
    display: block;
    
    
}
    
 
...zur Frage

Gibt es ein Tool mit dem ich herausfinden kann, in welcher php datei der code steht?

Hallo, bei Element untersuchen im Webbrowser wird ja auch der Pfad und die Zeile des CSS angezeigt, deshalb wollte ich fragen, ob es auch eine Möglichkeit gibt den Pfad der PHP,.. anzeigen zu lassen.

...zur Frage

Was möchtest Du wissen?