Que faire si le survol ne fonctionne pas-tutoriel CSS-php.cn

Que faire si le survol ne fonctionne pas

藏色散人

Libérer： 2023-01-03 09:27:15

original

9241 Les gens l'ont consulté

La solution pour le survol ne fonctionne pas : 1. Vérifiez et supprimez l'espace avant ":hover" ; 2. Vérifiez et modifiez le nom de classe correct 3. Vérifiez si ":hover" est placé dans ":hover" ; lien" et ":visited", modifiez simplement l'emplacement.

Que faire si le survol ne fonctionne pas

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

Il y a plusieurs raisons pour lesquelles le survol en CSS ne fonctionne pas :

1 Ajoutez un espace avant de définir : hover :

Par exemple,

<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one :hover {
background: #da56d0;
}
</style>
<body>
<h1>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>

Copier après la connexion

. Vous constatez que la souris Lorsque la classe est une, l'arrière-plan reste inchangé, mais la couleur d'arrière-plan des autres divs à l'intérieur d'un changement

Remarque : l'ajout d'un espace avant :hover n'aura pas l'effet de :hover lui-même. , mais les éléments descendants auront : un effet de survol.

[Apprentissage recommandé : Tutoriel vidéo CSS]

2 Lorsque la souris passe dessus, laissez les autres éléments changer de style :

Vous trouverez à cette fois, seuls les éléments descendants et les éléments frères (éléments frères immédiatement après l'élément) ont un effet, les autres :hover ne seront pas valides

3 Le nom de la classe est mal écrit

4. : hover est placé avant :link et :visited;

Dans la définition CSS, a:hover doit être placé après a:link et a:visited pour être valide.

Dans la définition CSS, a:active doit être placé après a:hover pour être valide.

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!