Comment implémenter jquery pour afficher lorsque la souris passe et se cacher en partant-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-04-22 14:35:15

original

3412 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

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)

Copier après la connexion

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!