Comment désactiver le survol CSS-Questions et réponses frontales-php.cn

Comment désactiver le survol CSS

藏色散人

Libérer： 2020-11-17 10:58:47

original

4158 Les gens l'ont consulté

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

Comment désactiver le survol CSS

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>

Copier après la connexion

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

Copier après la connexion

par

.one:hover .two {  
        background: #da56d0;  
    }

Copier après la connexion

et constatez que nous pouvons obtenir l'effet souhaité

peut également obtenir l'effet s'il est modifié en

.two:hover +.three {  
        background: #da56d0;  
    }

Copier après la connexion

(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;  
    }

Copier après la connexion

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!