Maison > Article > interface Web > Comment configurer la souris pour afficher l'image après avoir passé l'élément en CSS

Comment configurer la souris pour afficher l'image après avoir passé l'élément en CSS

青灯夜游original: 2021-07-21 15:51:3210842parcourir

En CSS, vous pouvez utiliser le sélecteur ":hover" pour obtenir l'effet d'afficher des images lorsque la souris passe sur un élément. Le sélecteur ":hover" est utilisé pour spécifier le style spécial ajouté lorsque le pointeur de la souris flotte sur un élément. element. Le format de syntaxe est "element:hover{background" : url(image address);}".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser le sélecteur ":hover" pour obtenir l'effet d'afficher des images lorsque la souris passe sur un élément.

: Le sélecteur de survol spécifie un style spécial qui est ajouté lorsque la souris est déplacée sur l'élément.

Jetons un coup d'œil à l'exemple de code ci-dessous :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 400px;
				height: 300px;
				border: 1px solid red;  
			}
			div:hover{
				background: url(img/1.jpg);
				background-size: 400px;
			}
		</style>
	</head>
	<body>
		<div>将鼠标移动到div盒子中：</div>

	</body>
</html>

Rendu :

Comment configurer la souris pour afficher limage après avoir passé lélément en CSS

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir 4 divs à afficher côte à côte en CSSArticle suivant：Comment définir 4 divs à afficher côte à côte en CSS

Articles Liés

Voir plus