Comment JavaScript peut-il désactiver les effets CSS : hover ?
Dec 03, 2024 pm 08:12 PMDésactivation de l'effet CSS :hover à l'aide de JavaScript
Obtenir un effet de survol plus fluide avec JavaScript tout en préservant les styles CSS peut être un défi. Voici comment le surmonter :
Énoncé du problème :
Empêcher le navigateur d'appliquer l'effet CSS :hover sur certains éléments lorsque JavaScript est disponible.
Solution :
Il n'existe pas de mécanisme JavaScript pur pour désactiver l'état :hover. Cependant, une solution de contournement consiste à utiliser une classe pour contrôler l'effet de survol en CSS et JavaScript.
HTML :
Ajoutez une classe "nojQuery" au <body>
CSS :
Limiter les styles :hover à appliquer uniquement lorsque la classe "nojQuery" est présente sur l'élément <body>
JavaScript :
Lors du chargement de JavaScript, supprimez la classe "nojQuery" du <body> élément, désactivant efficacement les styles de survol.
Exemple :
<body class="nojQuery">
body.nojQuery ul#mainFilter a:hover { /* CSS-only hover styles here */ }
$(function() { $('body').removeClass('nojQuery'); });
Cette approche vous permet de remplacer l'effet de survol CSS avec JavaScript sans devoir réinitialiser explicitement chaque propriété individuelle.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express
