Comment changer le style d'un lien lors du survol en HTML

En HTML, vous pouvez utiliser le sélecteur de pseudo-classe ":hover" pour changer le style de l'étiquette a lorsqu'elle est survolée. Il vous suffit de définir "a:hover{attribute:attribute value}" pour. l'élément a. Le sélecteur ":hover" permet de sélectionner l'élément sur lequel flotte le pointeur de la souris, puis d'ajouter le style correspondant à l'élément.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Vous pouvez utiliser le style CCS en HTML pour contrôler le changement de couleur lorsque la souris passe sur le lien hypertexte. Vous pouvez changer la couleur du texte ou de l'arrière-plan du calque.

Exemple spécifique :

Changer la couleur du texte, créer un nouveau DIV avec l'ID abc, écrire du texte (n'importe quel texte) dans le DIV à l'intérieur

En même temps fois, créez un code de connexion vide comme suit :

<div id="abc"><a href="#">文字</a></div>

En même temps, définissez le style CSS du texte (le texte est en police Song noire Le code est le suivant :

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

Définissez ensuite la couleur du texte au passage de la souris (le texte est en police Song rouge Le code devient :

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

change la couleur de fond. Le DIV de l'exemple 1 le définit comme. la hauteur et la largeur sont de 50px ; l'arrière-plan est gris

En même temps, la balise a définit également la hauteur et la largeur de 50px. Le code du bloc

est le suivant :

<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>

puis définit la couleur qui change au passage de la souris (la couleur est bleue). Le code est le suivant :

<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>

Apprentissage recommandé :

Tutoriel vidéo html.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!