Comment utiliser JQuery pour masquer des éléments avec le mouvement de la souris

JQuery est une bibliothèque JavaScript très populaire qui fournit un grand nombre de fonctions et de méthodes pour simplifier les tâches JS courantes. Cacher des éléments dans JQuery est l'une des tâches les plus courantes. Voici comment utiliser la souris JQuery pour déplacer des éléments masqués.

JQuery fournit une méthode très utile "hide()", qui peut masquer des éléments HTML. Si vous souhaitez masquer plusieurs éléments, vous pouvez utiliser la même classe pour les sélectionner, puis appeler la méthode hide() pour les masquer.

Voici un exemple :

Code HTML :

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

Code CSS :

.box{
    padding:10px;
    background-color:#f1f1f1;
}

Code JS :

$('.box').hide();

Dans le code ci-dessus, nous utilisons JQuery pour sélectionner tous les éléments avec la classe "box" et appelons .hide() méthode pour les cacher. Si vous affichez la page dans un navigateur maintenant, vous ne verrez rien car tous les éléments de classe « box » sont masqués.

Cependant, il y a un problème avec cela : comment les afficher à nouveau ? Vous pouvez utiliser la méthode .show() pour restaurer l'élément. Mais ici, nous utiliserons une méthode plus simple, qui consiste à utiliser les mouvements de la souris pour contrôler le masquage et l'affichage des éléments.

Voici un exemple :

Code HTML :

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

Code CSS :

.box{
    padding:10px;
    background-color:#f1f1f1;
}

Code JS :

$('.box').mouseover(function(){
    $(this).hide();
}).mouseout(function(){
    $(this).show();
});

Dans le code ci-dessus, nous utilisons JQuery pour sélectionner tous les éléments avec la classe "box" et enregistrer un événement de mouvement de souris (survol de la souris). Lorsque la souris survole un élément, la méthode hide() est appelée pour masquer l'élément. Lorsque la souris s'éloigne, la méthode show() est appelée pour afficher l'élément.

Si vous consultez cette page dans votre navigateur maintenant, vous verrez tous les éléments. Cependant, lorsque vous déplacez la souris sur un élément, celui-ci sera masqué. Lorsque la souris s'éloigne, elle réapparaîtra.

Ce qui précède explique comment utiliser la souris JQuery pour déplacer des éléments cachés. Cette technique peut être utilisée dans de nombreuses applications web telles que les menus, les onglets, etc.

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!