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!