communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Jquery cliquez sur le bouton pour mettre automatiquement en évidence le principe de mise en œuvre et code_jquery

Jquery cliquez sur le bouton pour mettre automatiquement en évidence le principe de mise en œuvre et code_jquery

WBOY
Libérer： 2016-05-16 16:51:05
original
1141 Les gens l'ont consulté

En fait, le principe est très simple. Lorsque nous cliquons, nous ajoutons une attr personnalisée à l'élément. Après l'avoir ajouté, il y aura un style correspondant qui s'adaptera automatiquement à l'arrière-plan. Après quelques secondes, supprimerons le style et le restaurerons. à son état d'origine

Étendez d'abord une méthode hoverEl dans votre propre js

Copiez le code Le code est tel suit :

$ .extend($.fn, {
hoverEl:function(){

var _this = $(this);
var _t = setTimeout (function(){
_this.attr( "hover", "on");
}, 10);
_this.attr("hoverTimeout", _t);

setTimeout); (function(){
clearTimeout( _this. attr("hoverTimeout") );
var _t = setTimeout(function(){
_this.removeAttr("hover");
}, 100 );
_this.attr("hoverTimeout" , _t);
},200);

}
}); , lorsqu'une attr spécifique est ajoutée


Copier le code Le code est le suivant : li[ hover=on]{
background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important
background-image : -webkit-linear-gradient(top, #4286F5, #194FDB )!important;
couleur : blanc!important
curseur : pointeur!important;


Exemple d'appel :



Copier le code
Le code est le suivant : $(e.target) .hoverEl();
Étiquettes associées：
cliquez sur le bouton
source：php.cn
Article précédent：Deux façons de contrôler l'apparence cachée des conteneurs js pour empêcher les changements de style_compétences javascript Article suivant：jquery désactiver le clic droit example_jquery
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
La mise à jour du statut ne fonctionne pas dans React-Native sur Android J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...
Depuis 2024-04-06 16:54:10
0
1
410
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
La meilleure façon d'implémenter la commutation à trois états en réaction ? Je crée des boutons dans React qui déclenchent un changement d'état de l'un à l'autre. Cer...
Depuis 2024-04-06 13:51:32
0
1
418
Comment imprimer la valeur de la case à cocher sélectionnée après la soumission Ceci est ma liste de cases à cocher et les boutons dont j'ai besoin pour soumettre des don...
Depuis 2024-04-06 13:07:43
0
2
337
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal