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

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>

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>

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>

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>

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>

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!