La méthode de survol dans jQuery implémente la mise en évidence des éléments sélectionnés

Cet article vous apporte principalement un article sur la méthode de survol en jQuery et le sélecteur de survol en CSS pour réaliser la méthode de mise en évidence des éléments sélectionnés. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Aujourd'hui alors que j'aidais une sœur aînée à créer une page web, j'ai rencontré une requête comme celle-ci :

La souris ne bouge pas le tableau, et la transparence du tableau reste inchangée.

Déplacez la souris dans le tableau, la transparence des cellules survolées reste inchangée, et la transparence des cellules non survolées change.

Publiez d'abord l'effet que j'ai obtenu au début, la transparence du tableau reste inchangée.

Lorsque je déplace la souris vers la troisième cellule de la deuxième rangée, les autres cellules réduisent leur transparence.

Solution

Au début, j'ai utilisé la méthode d'implémentation CSS, qui est la suivante

#table td{
 opacity:0.5;
}
#table td:hover{
 opacity:1;
}

Cependant, lorsque vous entrez pour la première fois, la transparence du tableau est de 0,5, ce qui semble très mauvais.

Plus tard, j'ai utilisé la méthode de survol de jQuery, mais elle sélectionnait toujours toutes les cellules à l'intérieur. Le processus était très tortueux, je ne les présenterai donc pas une par une, je parlerai simplement de la façon dont j'y suis parvenu.

$('#content td').hover(
  function(){
   $('#content td').css('opacity','0.5');
   $('#content td:hover').css('opacity','1');
   },
  function(){
   $('#content td').css('opacity','1');
  });

content est le nom d'identification de ma table. Vous pouvez voir que nous avons ajouté deux fonctions à la méthode de survol de cellule

Lorsque la première fonction se déplace vers la table, le chef

$('#content td').css('opacity','1');

signifie que lorsque la souris entre, la transparence de toutes les cellules est 0.5. Puis

$('#content td:hover').css('opacity','1');

Le sélecteur de survol de CSS signifie ici cellule unique sélectionnée.

La deuxième fonction indique quand la souris quitte le formulaire

Recommandations associées :

Résumé des exemples d'utilisation du survol

Explication détaillée de l'utilisation du sélecteur de survol en CSS

Explication détaillée du conflit entre les événements de survol et de clic dans jQuery (photo)

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!