Comment modifier dynamiquement la couleur de survol des éléments HTML en cliquant sur le bouton?

Utilisation des variables CSS et JavaScript pour modifier dynamiquement la couleur de survol de l'élément

Cet article présente comment modifier dynamiquement la couleur de survol des éléments HTML en cliquant sur un bouton pour améliorer l'expérience interactive Web. Nous utiliserons les variables CSS et JavaScript pour implémenter cette fonctionnalité.

L'objectif est: cliquez sur le bouton pour modifier le style de survol de l'élément existant. Pour ce faire, nous utiliserons les variables CSS pour définir la couleur de survol et modifier la valeur de la variable CSS dans l'événement de clic du bouton via JavaScript.

Plan de mise en œuvre:

Tout d'abord, la structure HTML contient l'élément cible ( .element ) et plusieurs boutons ( .change-color ), chaque bouton correspondant à une couleur de survol:

<div class="container">
  <div class="element"></div>
  <button class="change-color">rouge</button>
  <button class="change-color">vert</button>
  <button class="change-color">bleu</button>
</div>

Le style CSS définit le style de base de l'élément et utilise la variable CSS --color pour contrôler la couleur de survol, rouge par défaut:

 .élément {
  Largeur: 100px;
  hauteur: 100px; / * Le rapport d'aspect n'est pas compatible avec tous les navigateurs, changé en hauteur fixe * /
  marge: 20px;
  Color en arrière-plan: LightGray; / * Ajouter une couleur d'arrière-plan pour faciliter l'observation de l'effet * /
}

.Element: Hover {
  Contexte: var (- couleur, rouge);
}

Enfin, le code JavaScript écoute chaque événement de clic de bouton. Après avoir cliqué sur le bouton, obtenez le contenu du texte du bouton (nom de couleur) et attribuez la valeur de couleur à la variable CSS --color à l'aide de el.style.setProperty() :

 const el = document.QuerySelector (". élément");

document.QuerySelectorall (". Change-Color"). ForEach (E => {
  e.AddeventListener ("cliquez", () => {
    el.style.setproperty ("- couleur", e.textContent);
  });
});

Grâce aux travaux collaboratifs de HTML, CSS et JavaScript, vous pouvez réaliser la fonction de modifier dynamiquement la couleur de survol des éléments HTML en cliquant sur un bouton. Cette méthode est simple, efficace et facile à entretenir.

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!