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

10795 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!