Was nützt Hover in CSS?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Was nützt Hover in CSS?

青灯夜游

Dec 04, 2020 pm 05:19 PM

css hover

In CSS wird der Selektor „:hover“ verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt, und dann den Stil dafür festzulegen. Das Syntaxformat ist „element:hover{css style};“ „: „hover“ muss sich in „:link“ und „:visited“ (falls vorhanden) befinden, damit der Stil wirksam werden kann.

Was nützt Hover in CSS?

Verwandte Empfehlungen: „Programmier-Tutorial“

: Der Hover-Selektor wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt.

Tipp: Der :hover-Selektor kann für alle Elemente verwendet werden, nicht nur für Links.

In der CSS-Definition muss :hover nach :link und :visited (falls vorhanden) platziert werden, damit der Stil wirksam wird.

:Link-Selektor legt den Stil von Links fest, die auf nicht besuchte Seiten verweisen, :visited-Selektor wird verwendet, um Links zu besuchten Seiten festzulegen, und :active-Selektor wird für aktive Links verwendet.

css: Hover-Selektor-Verwendung

Verwendung 1:

Das bedeutet: Wenn die Maus über dem Stil a schwebt, wird die Hintergrundfarbe von a auf Gelb gesetzt.

a:hover
    { 
        background-color:yellow;
    }

Nach dem Login kopieren

dies ist der Die häufigste Verwendung besteht darin, einfach den Stil durch a zu ändern.

Verwendung 2:

Verwenden Sie a, um den Stil anderer Blöcke zu steuern die Brüder eines Elements c (Geschwisterelement):

    .a:hover .b {
            background-color:blue;
        }

Nach dem Login kopieren

Verwenden Sie a, um das benachbarte Element d von a zu steuern:

.a:hover + .c {
        color:red;
    }

Nach dem Login kopieren

Zusammenfassend:

1. Fügen Sie nichts in der Mitte hinzu, um die untergeordneten Elemente zu steuern; 2. „+“ steuert das gleiche Level-Element (Geschwisterelement);

Beispiel

Verwenden Sie eine Schaltfläche, um den Bewegungsstatus eines Felds zu steuern Wenn Sie die Schaltfläche drücken, stoppt die Bewegung der Box und die Maus bewegt sich weg, die Box bewegt sich weiter

Körpercode:

.a:hover ~ .d {
        color:pink;
    }

Nach dem Login kopieren

css-Stil:

<body>
    <div class="btn stop">stop</div>
    <div class="animation"></div>
</body>

Nach dem Login kopieren

Weitere verwandte Artikel finden Sie auf der

PHP-Chinese-Website

! !

Das obige ist der detaillierte Inhalt vonWas nützt Hover in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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