Heim > Artikel > Web-Frontend > So verwenden Sie Pseudoklassen-Hover

So verwenden Sie Pseudoklassen-Hover

php中世界最好的语言Original: 2018-03-21 16:20:482901Durchsuche

Dieses Mal werde ich Ihnen zeigen, wie man Pseudo-Hover verwendet. Was sind die Vorsichtsmaßnahmen, wenn Sie Pseudo-Hover verwenden? Hier sind praktische Fälle, schauen wir uns das an.

Aufgrund des von der Hover-Pseudoklasse hinzugefügten Animationseffekts wird dieser nur ausgelöst, wenn die Maus auf dem Element platziert wird, und wenn die Maus es verlässt, wird der Effekt unterbrochen und es wird sehr steif erscheinen.

Die Idee der meisten Leute ist, die Ereignisse onmouseover und onmouseleave von js zu verwenden, um Animationseffekte zu erzielen. Tatsächlich muss es nicht so mühsam sein, CSS3 kann Ihnen bei der Lösung dieser Probleme helfen.

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>离开时效果生硬</title>
        <style type="text/css">
            p{
                width: 100px;
                height: 100px;
                border:1px solid;
    
                margin:0px auto;
                margin-top: 200px;
            }
            p:hover{
                transform: scale(2);
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <p></p>
    </body>
    </html>

Da das p-Element nur zum p-Element hinzugefügt werden kann, wenn die Pseudoklasse :hover ausgelöst wird.

Wenn die Maus das p-Element verlässt, wird die Pseudoklasse :hover nicht mehr wirksam und der in Hover geschriebene Animationseffekt geht sofort verloren.

Zu diesem Zeitpunkt sollten wir einen identischen Übergangseffekt auf das ursprüngliche Element schreiben, um den unterbrochenen Animationseffekt fortzusetzen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单解决</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            border:1px solid;
            margin:0px auto;
            margin-top: 200px;
            /* 在原本元素上再加一个transition */
            transition: all 1s linear;
        }
        p:hover{
            transform: scale(2);
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>

Zu diesem Zeitpunkt kehrt die Maus unverändert zurück, egal wann sie das Element verlässt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Unpopuläre CSS-Eigenschaften, die Sie nicht kennen

Was sind href und src, link und @ Import? Unterschied

Wie kann die absolute Positionierung von CSS mit allen Auflösungen kompatibel sein

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Pseudoklassen-Hover. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS3 anstelle von JS, um interaktive Effekte zu erzielenNächster Artikel：So verwenden Sie CSS3 anstelle von JS, um interaktive Effekte zu erzielen

In Verbindung stehende Artikel

Mehr sehen