Heim > Web-Frontend > HTML-Tutorial > So ändern Sie einen Linkstil, wenn Sie den Mauszeiger in HTML bewegen

So ändern Sie einen Linkstil, wenn Sie den Mauszeiger in HTML bewegen

醉折花枝作酒筹
Freigeben: 2023-01-05 16:11:08
Original
3838 Leute haben es durchsucht

In HTML können Sie den Pseudoklassenselektor „:hover“ verwenden, um den Stil der Beschriftung „a“ zu ändern, wenn Sie mit der Maus darüber fahren. Sie müssen nur „a:hover{attribute:attribute value}“ für das a-Element festlegen. Der Selektor „:hover“ wird verwendet, um das Element auszuwählen, auf dem der Mauszeiger schwebt, und dann dem Element den entsprechenden Stil hinzuzufügen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Sie können den CCS-Stil in HTML verwenden, um die Farbänderung zu steuern, wenn die Maus über den Hyperlink fährt. Sie können die Farbe des Textes oder den Hintergrund der Ebene ändern.

Konkretes Beispiel:

Ändern Sie die Farbe des Textes, erstellen Sie ein neues DIV mit der ID abc und schreiben Sie Text (beliebigen Text) in das DIV

Gleichzeitig erstellen Sie einen leeren Verbindungscode wie folgt:

<div id="abc"><a href="#">文字</a></div>
Nach dem Login kopieren

Definieren Sie gleichzeitig den CSS-Stil des Textes (Text für schwarze Song-Schriftart). Der Code lautet wie folgt:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
</style>
Nach dem Login kopieren

Definieren Sie dann die Farbe des Textes, wenn die Maus vorbeifährt (der Text ist Song-Schriftart rot). Der Code wird :

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
</style>
Nach dem Login kopieren

Nehmen Sie die Hintergrundfarbe in Beispiel 1 vor und definieren Sie sie als Höhe und Breite. Der Hintergrund ist grau. Gleichzeitig definiert das Tag a auch einen Block mit einer Höhe und einer Breite von 50 Pixel;

Der Code lautet wie folgt:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>
Nach dem Login kopieren

Dann definieren Sie die Farbe, die sich ändert, wenn die Maus vorbeifährt (die Farbe ist blau). Der Code lautet wie folgt:

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
    background-color: #0066FF;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>
Nach dem Login kopieren
Empfohlenes Lernen:

HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie einen Linkstil, wenn Sie den Mauszeiger in HTML bewegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage