Maison > Article > interface Web > Comment utiliser jquery pour augmenter la largeur de li lorsque la souris survole

Comment utiliser jquery pour augmenter la largeur de li lorsque la souris survole

青灯夜游original: 2022-03-23 17:46:091824parcourir

Méthode : 1. Utilisez hover() pour définir la fonction de traitement à exécuter lorsque la souris survole l'élément li, la syntaxe est "$("li").hover(function(){})" 2. Dans la fonction de traitement, utilisez width() pour augmenter la largeur de l'élément li, la syntaxe est "$("li").width("value");".

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

jquery implémente l'effet d'augmenter la largeur de li lorsque la souris survole

Idée d'implémentation :

Utilisez la méthode hover() pour lier l'événement de survol de la souris à l'élément li et définir la fonction de traitement d'événement
Dans la fonction de traitement, utilisez width() pour ajouter de la largeur à l'élément li

Code d'implémentation :

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("li").hover(function() {
					$("li").width("100%");
				}, function() {
					$("li").width("200px");
				});
			});
		</script>
	</head>
	<body>
		<ul>
			<li style="background-color: pink;width:200px ;">鼠标移动到该li元素上</li>
		</ul>
	</body>
</html>

Comment utiliser jquery pour augmenter la largeur de li lorsque la souris survole

[Apprentissage recommandé : Tutoriel vidéo jQuery, Développement 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!

jquery function 事件 li

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：Quelles sont les méthodes couramment utilisées pour obtenir des attributs en jquery ?Article suivant：Quelles sont les méthodes couramment utilisées pour obtenir des attributs en jquery ?

Articles Liés

Voir plus