How Can I Dynamically Change CSS Properties Using JavaScript to Toggle Element Visibility on Hover?

Modifying CSS Properties with JavaScript

In the realm of web development, you may often encounter situations where you need to dynamically change the appearance or behavior of elements based on user interactions. One such scenario is when you want to make certain elements visible or invisible upon hovering. In this article, we'll explore a JavaScript-based technique to achieve this effect by manipulating CSS properties.

Changing CSS Properties Using JavaScript

To change a CSS property using JavaScript, we can access the element's style property. This property allows us to read and modify the element's styles directly. Consider the following example:

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

This code changes the property CSS property of the element with the id "element" to "new value."

Visibility Toggling on Hover

Let's apply this technique to our specific scenario, where we want to display a hidden element when its triggering element is hovered over. In our HTML, we have two

<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));