How to dynamically modify the hover color of HTML elements by clicking the button?

Using CSS variables and JavaScript to dynamically modify element hover color

This article introduces how to dynamically change the hover color of HTML elements by clicking a button to improve the web interactive experience. We will use CSS variables and JavaScript to implement this functionality.

The goal is: click the button to modify the existing element hover style. To do this, we will use CSS variables to define the hover color and modify the value of the CSS variable in the button click event through JavaScript.

Implementation plan:

First, the HTML structure contains the target element ( .element ) and multiple buttons ( .change-color ), each button corresponding to a hover color:

<div class="container">
  <div class="element"></div>
  <button class="change-color">red</button>
  <button class="change-color">green</button>
  <button class="change-color">blue</button>
</div>

CSS style defines the basic style of the element and uses the CSS variable --color to control the hover color, default red:

 .element {
  width: 100px;
  height: 100px; /* aspect-ratio is not compatible with all browsers, changed to fixed height*/
  margin: 20px;
  background-color: lightgray; /* Add background color to make it easier to observe the effect*/
}

.element:hover {
  background: var(--color, red);
}

Finally, the JavaScript code listens for each button click event. After clicking the button, get the button text content (color name) and assign the color value to the CSS variable --color using el.style.setProperty() method:

 const el = document.querySelector(".element");

document.querySelectorAll(".change-color").forEach(e => {
  e.addEventListener("click", () => {
    el.style.setProperty("--color", e.textContent);
  });
});

Through the collaborative work of HTML, CSS and JavaScript, you can realize the function of dynamically changing the hover color of HTML elements by clicking a button. This method is simple, efficient and easy to maintain.

The above is the detailed content of How to dynamically modify the hover color of HTML elements by clicking the button?. For more information, please follow other related articles on the PHP Chinese website!