如何使用 JavaScript 动态更改 CSS 属性以切换元素在悬停时的可见性？

使用 JavaScript 修改 CSS 属性

在 Web 开发领域，您可能经常遇到需要根据用户动态更改元素的外观或行为的情况互动。其中一种场景是当您想要使某些元素在悬停时可见或不可见时。在本文中，我们将探索一种基于 JavaScript 的技术，通过操作 CSS 属性来实现此效果。

使用 JavaScript 更改 CSS 属性

要使用 JavaScript 更改 CSS 属性，我们可以访问元素的样式属性。该属性允许我们直接读取和修改元素的样式。考虑以下示例：

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

此代码将 id 为“element”的元素的 CSS 属性更改为“新值”。

悬停时切换可见性

让我们将此技术应用到我们的特定场景中，我们希望在触发元素悬停时显示隐藏元素。在我们的 HTML 中，我们有两个

：元素，每个元素都有一个嵌套的

最初是隐藏的：

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

然后我们的 JavaScript 使用事件侦听器来触发可见性切换：

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

在此代码中，toggleVisibility 函数更改嵌套 < 的显示属性;div> “阻止”使其可见。触发元素上的事件监听器监听鼠标悬停事件并相应地调用toggleVisibility函数。

以上是如何使用 JavaScript 动态更改 CSS 属性以切换元素在悬停时的可见性？的详细内容。更多信息请关注PHP中文网其他相关文章！