Maison > Article > interface Web > Comment implémenter jquery pour afficher lorsque la souris passe et se cacher en partant

Comment implémenter jquery pour afficher lorsque la souris passe et se cacher en partant

青灯夜游original: 2022-04-22 14:35:153362parcourir

Méthode : 1. Utilisez la méthode hover() pour lier les événements de la souris à l'élément parent et spécifiez deux fonctions de traitement d'événements. La syntaxe est "élément parent.hover (fonction de passage, fonction de sortie)" ; fonction, utilisez "Child element.show()" pour afficher l'élément enfant ; 3. Dans la fonction de sortie, utilisez "child element.hide()" pour masquer l'élément enfant.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

jquery implémente l'effet d'affichage et de masquage lorsque la souris passe dessus

Méthode d'implémentation :

Utilisez la méthode hover() pour lier les événements de la souris à l'élément parent et spécifiez deux fonctions de traitement d'événements --via la fonction d'affichage et en quittant la fonction cachée
Dans la fonction de passage, utilisez show() pour afficher les éléments enfants
Dans la fonction de sortie, utilisez hide() pour masquer les éléments enfants

Exemple d'implémentation :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			div{
				border: 1px solid red;
				height: 100px; 
				 
			}
			p{
				background-color: pink;
				display: none;
			}
		</style>
		<script>
			$(function() {
				$("div").hover(function() {
					$("p").show();
				}, function() {
					$("p").hide();
				});
			})
		</script>
	</head>
	<body>
		<div>
			<p>
				p元素，默认是隐藏的，当鼠标经过时显示，离开时隐藏
			</p>
		</div>
		<br>
		<span>使用鼠标悬停div元素</span>
	</body>
</html>

Comment implémenter jquery pour afficher lorsque la souris passe et se cacher en partant

Instructions : La méthode

hover() spécifie deux fonctions à exécuter lorsque le pointeur de la souris survole l'élément sélectionné. La méthode

déclenche les événements mouseenter et mouseleave.

Remarque : si une seule fonction est spécifiée, mouseenter et mouseleave l'exécuteront.

Syntaxe :

$(selector).hover(inFunction,outFunction)

Paramètres	Description
dans la fonction	Obligatoire. Spécifie la fonction à exécuter lorsque l'événement mouseenter se produit.
outFunction	Facultatif. Spécifie la fonction à exécuter lorsque l'événement mouseleave se produit.

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

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 remplacer les nœuds par jqueryArticle suivant：Comment remplacer les nœuds par jquery

Articles Liés

Voir plus