Maison > Article > interface Web > Que faire si le survol ne fonctionne pas
Que faire si le survol ne fonctionne pas
- 藏色散人original
- 2021-03-03 10:40:429176parcourir
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.
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>. 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!