Wie kann ich die Verzögerung einen :hover-Effekt in CSS?

Gibt es eine Möglichkeit die Verzögerung der :Hover-event ohne JavaScript zu verwenden? Ich weiß, es ist ein Weg, um die Verzögerung Animationen, aber ich habe nicht gesehen, was auf die Verzögerung der :hover-event.

Ich Baue ein son-of-suckerfish wie Menü. Ich möchte simulieren, wie hoverIntent nicht ohne Zugabe die zusätzliche JS Gewicht. Ich würde es vorziehen, behandeln Sie dies als eine progressive enhancement und nicht JS eine Anforderung für die Verwendung des Menüs.

Beispiel Menü markup:

<div>
    <div>
        <ul>
            <li><a href="#">
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>
            <li>
        </ul>
    </div>
</div>

Hier ist die vollständige demo: http://jsfiddle.net/aEgV3/

Interessante Frage, aber ich denke, 'Nein, nicht ohne JavaScript' dürfte die Antwort sein, leider.

InformationsquelleAutor Adam Youngers | 2011-12-19

128

Können Sie übergänge zu verzögern, die :hover Effekt, den Sie wollen, wenn der Effekt ist CSS-basiert.

Beispielsweise
```
div{
    transition: 0s background-color;
}

div:hover{
    background-color:red;    
    transition-delay:1s;
}
```
dies führt zu einer Verzögerung der Anwendung der die hover-Effekte (background-color in diesem Fall) für eine Sekunde.

Demo-Verzögerung auf beiden schweben auf und ab:

CSS:
```
div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
    transition-delay:1s;
}
div:hover{
    background-color:red;
}
```
HTML:
```
<div>delayed hover</div>
```
Demo Verzug nur auf hover auf:

CSS:
```
div{
    display:inline-block;
    padding:5px;
    margin:10px;
    border:1px solid #ccc;
    transition: 0s background-color;
}
div:hover{
    background-color:red;    
    transition-delay:1s;
}
```
HTML:
```
<div>delayed hover</div>
```
Herstellerspezifische Erweiterungen für Übergänge und W3C CSS3 transitions
- Ich aktualisiert meine Frage... ich bin mir nicht sicher, ob ein übergang wäre in meinem Fall oder nicht. Ich habe die sub-Menüs positioniert sich der Bildschirm und Sie wieder an Ort und Stelle auf hover.
- Aber wie, um die Uhrzeit für in und out. Wie wenn man mit der Maus auf das div für 1sec... dann übergang Auftritt. Aber wenn die sich bewegen.. dann sofort der übergang geht aus..
- Die Eigenschaft zu behandeln, die Dauer des übergangs ist eine andere. Sie können manipulieren diese deutlich um den Effekt zu erzielen den Sie möchten, Beispiel: dabblet.com/gist/332903040f1f07754d1f
- hängt davon ab, wie Sie anzeigen/ausblenden. Wenn es mit display Eigenschaft nicht, aber wenn Sie es vom Bildschirm, dann ja.
- Die Dauer wird wirksam :auch aktiv. Sie müssen zum rücksetzen der Verzögerung 0s on :active, um Wartezeiten zu vermeiden, bevor Sie alle :der aktive übergang wirksam.
InformationsquelleAutor Gabriele Petrioli

div {
     background: #dbdbdb;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    background:#5AC900;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

Diese fügen eine transition delay, das gilt für fast jeden browser..

InformationsquelleAutor Shailesh kala

0

Für eine ästhetische Erscheinung 🙂 kann sein:
```
left:-9999em; 
top:-9999em; 
```
position für .sNv2 .nav UL kann ersetzt werden durch z-index:-1 und z-index:1 für .sNv2 .nav LI:Hover UL

InformationsquelleAutor Колян Чернышов

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.