Solution d'événement de survol pour plusieurs éléments dans jQuery

1. Introduction aux exigences

L'événement de survol de jQuery ne concerne qu'un seul élément HTML, par exemple :

Copier le code Le code est le suivant :

$('#login').hover(fun2, fun2);

La fonction fun1 est appelée lorsque la souris entre dans l'élément #login, la fonction fun2 est appelée en quittant. Cette API peut répondre à la plupart des besoins.

Cependant, nous souhaitons parfois que fun1 soit déclenché lorsque la souris entre dans deux éléments ou plus, et fun2 soit déclenché lorsque la souris les quitte, tandis que déplacer la souris entre ces éléments ne déclenche aucun événement. Par exemple, deux éléments HTML sont côte à côte, comme indiqué ci-dessous :

Solution d'événement de survol pour plusieurs éléments dans jQuery_jquery

Solution d'événement de survol pour plusieurs éléments dans jQuery_jquery

Fun1 se déclenche lorsque la souris entre dans la zone située entre les deux, et fun2 se déclenche lorsque le feuilles de souris. Vous pourriez penser à utiliser la méthode suivante

Copier le code Le code est le suivant :

$ ("# trigger, #drop'),hover(fun1, fun2);

Cette méthode ne répond pas à nos besoins, car fun2 et fun1 seront déclenchés lors de la saisie de #drop depuis #trigger. Pour résoudre ce problème, un moyen relativement simple consiste à modifier la structure HTML. La mise en œuvre est la suivante :

Copier le code Le code. est la suivante :

< ;/div>

$('#container').hover(fun1, fun2);

Par ici liaison sur l'événement de survol de l'élément parent pour réaliser cette fonction.

2. Exemple d'étude

L'image ci-dessous est un schéma simplifié d'un menu déroulant commun. La structure HTML est la suivante :

Solution d'événement de survol pour plusieurs éléments dans jQuery_jquery

Copier le code Le code est le suivant :

ul id="#nav "> 
< ;/li> 

 Liste déroulante menu 

Élément déroulant 1

Élément de pool-down 2
 ; 

Le programme JavaScript implémenté est également très simple

Copier le code Le code est le suivant : $('#droplist').hover(function(){

$( this) .find('ul').show();

}, function(){ 
$(this).find('ul').hide( 
}); 🎜> 
Cette méthode d'implémentation a une logique claire, mais elle entraîne trop de niveaux HTML imbriqués et beaucoup d'inconvénients lors de l'écriture de CSS. Par exemple : 

Copier le code

Le code est le suivant : #nav li { font- size:14px; }

Nous voulons que ce CSS définisse une police de 14 pixels pour l'élément li du premier calque, mais cela affecte également l'élément du deuxième calque, nous devons donc utiliser ce qui suit déclaration pour le réécrire

Copier le code

Le code est le suivant : #nav li li { font-size:12px; }

3. Solution

Modifier la structure HTML

Copier code

Le code est le suivant :