Comment puis-je modifier dynamiquement les propriétés CSS à l'aide de JavaScript pour activer/désactiver la visibilité des éléments au survol ?

Modification des propriétés CSS avec JavaScript

Dans le domaine du développement Web, vous pouvez souvent rencontrer des situations dans lesquelles vous devez modifier dynamiquement l'apparence ou le comportement des éléments en fonction de l'utilisateur. interactions. Un de ces scénarios est celui où vous souhaitez rendre certains éléments visibles ou invisibles lors du survol. Dans cet article, nous explorerons une technique basée sur JavaScript pour obtenir cet effet en manipulant les propriétés CSS.

Modification des propriétés CSS à l'aide de JavaScript

Pour modifier une propriété CSS à l'aide de JavaScript, nous pouvons accéder la propriété de style de l'élément. Cette propriété nous permet de lire et de modifier directement les styles de l'élément. Prenons l'exemple suivant :

document.getElementById("element").style.property = "new value";

Ce code modifie la propriété CSS de l'élément portant l'identifiant "element" en "nouvelle valeur".

Basculement de la visibilité au survol

Appliquons cette technique à notre scénario spécifique, où nous souhaitons afficher un élément caché lorsque son élément déclencheur est survolé. Dans notre HTML, nous avons deux

<div class="left">Hello</div>
<div class="center">
  <div class="left1">

// Get the trigger elements
const left = document.querySelector(".left");
const right = document.querySelector(".right");

// Define a function to toggle visibility
const toggleVisibility = (element) => {
  element.querySelector("div").style.display = "block";
};

// Add event listeners
left.addEventListener("mouseenter", () => toggleVisibility(left));
left.addEventListener("mouseleave", () => toggleVisibility(left));
right.addEventListener("mouseenter", () => toggleVisibility(right));
right.addEventListener("mouseleave", () => toggleVisibility(right));