Pourquoi parfois il n'y a pas de réponse lors de l'utilisation de l'attribut hover en CSS ? (exemple)-tutoriel CSS-php.cn

Pourquoi parfois il n'y a pas de réponse lors de l'utilisation de l'attribut hover en CSS ? (exemple)

藏色散人

Libérer： 2018-08-10 17:24:10

original

10771 Les gens l'ont consulté

Lorsque nous utilisons le survol en CSS, nous rencontrons occasionnellement des situations invalides, ce qui est vraiment inquiétant. Alors, quelle est exactement la cause de l’échec ? Cet article résumera les raisons pour lesquelles le survol échoue en CSS.

Les exemples de code spécifiques pour l'utilisation du survol en CSS sont les suivants :

<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>css中hover的用法测试</h1>
<div class="one">
	<div class="two">
	</div>
	<div class="three">	
	</div>
	<div class="four">	
	</div>
</div>
</body>

Copier après la connexion

Résumé des raisons invalides :

1. au-dessus du code, il a été constaté que la souris passait. 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'une change. Cela montre que l'ajout d'un espace avant :hover n'aura pas l'effet de :hover,. mais les éléments descendants auront pour effet :hover.

2. 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, et les autres :hover seront invalides

3 Le nom de la classe est erroné ;

4. :hover est également invalide s'il est placé avant :link et :visited

Remarque :

:hover selector est utilisé pour sélectionner l'élément sur lequel se trouve le pointeur de la souris; flottant.

Astuce : Le sélecteur :hover peut être utilisé sur tous les éléments, pas seulement sur les liens.

Astuce : Le sélecteur :link définit le style des liens pointant vers des pages qui n'ont pas été visitées, le sélecteur :visited est utilisé pour définir des liens vers des pages qui ont été visitées et le sélecteur :active est utilisé pour liens actifs. Dans la définition CSS, :hover doit venir après :link et :visited (si présent) pour que le style prenne effet.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Pourquoi parfois il n'y a pas de réponse lors de l'utilisation de l'attribut hover en CSS ? (exemple)