Comment JavaScript peut-il désactiver les effets CSS : hover ?-tutoriel CSS-php.cn

Comment JavaScript peut-il désactiver les effets CSS : hover ?

Barbara Streisand

Libérer： 2024-12-03 20:12:13

original

379 Les gens l'ont consulté

How Can JavaScript Disable CSS :hover Effects?

Dé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

CSS :
Limiter les styles :hover à appliquer uniquement lorsque la classe "nojQuery" est présente sur l'élément

JavaScript :
Lors du chargement de JavaScript, supprimez la classe "nojQuery" du élément, désactivant efficacement les styles de survol.

Exemple :

<body class="nojQuery">

Copier après la connexion

body.nojQuery ul#mainFilter a:hover {
  /* CSS-only hover styles here */
}

Copier après la connexion

$(function() {
  $('body').removeClass('nojQuery');
});

Copier après la connexion

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!