Maison > Article > interface Web > Comment désactiver le survol CSS
Les raisons pour lesquelles le survol CSS échoue : 1. Dans la définition CSS, "a:hover" n'est pas placé après "a:link" et "a:visited" 2. Dans la définition CSS, " a ; :active" n'est pas placé après "a:hover".
Recommandé : "Tutoriel vidéo CSS"
Certains des échecs de survol en CSS Raison :
Lors du réglage du survol CSS, vous constaterez parfois que le survol ne fonctionne pas. Pour résumer les raisons :
Astuce : Dans la définition CSS, a:hover doit être. placé Il n'est valable qu'après un:link et un:visited.
Astuce : Dans la définition CSS, a:active doit être placé après a:hover pour être valide.
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 l'arrière-plan ne change pas lorsque la souris passe sur celui de la classe, mais lors du passage à travers d'autres divs dans un La couleur d'arrière-plan change.
Description : L'ajout d'un espace avant :hover n'aura pas l'effet de :hover lui-même, mais les éléments descendants auront l'effet de :hover.
2. Lorsque la souris passe dessus, laissez les autres éléments changer de style :
À ce stade, vous constaterez que 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. , Autres : le survol échouera
Ou l'exemple précédent
Remplacez
.one :hover {
background: #da56d0;
}par
.one:hover .two {
background: #da56d0;
}et constatez que nous pouvons obtenir l'effet souhaité
peut également obtenir l'effet s'il est modifié en
.two:hover +.three {
background: #da56d0;
}(notez que si vous supprimez le signe "+", l'effet ne sera pas obtenu)
ne peut pas être obtenu s'il est modifié to
.two:hover .four {
background: #da56d0;
}Notre effet (avec ou sans le signe plus)
3 Le nom de la classe est mal écrit
4. visité;
5. Vous avez mal lu;
Attendez...
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!