JavaScript 如何动态改变 CSS 属性以在嵌套元素上创建悬停效果？

了解使用 JavaScript 动态更改 CSS 属性

随着现代 Web 开发的出现，通常需要修改元素的视觉呈现动态响应用户交互或特定条件。 JavaScript 提供了一个强大的解决方案，通过以编程方式操作 CSS 属性来实现此目的。

目标：在嵌套元素上实现悬停效果

在您提供的场景中，您的目标是推出一个隐藏

当另一个

时的元素悬停。为此，我们将深入研究 JavaScript 修改 CSS 属性的实际应用。

第 1 步：了解 Style 属性

使用以下命令更改 CSS 属性的关键JavaScript 的关键在于 style 属性。它提供对元素内联样式的直接访问，允许您操作各种属性，包括边框、颜色和显示设置。

第 2 步：操作边框样式

要在元素悬停时更改元素的边框，可以使用以下语法：

document.getElementById("elementId").style.border = "3px solid #FF0000";

此代码集将具有指定 ID 的元素的边框更改为 3 像素宽的红色实心边框。

第 3 步：修改显示设置

在您的情况下，您想要制作一个隐藏的

;当悬停事件发生时出现。为此，您可以使用 display 属性：

document.getElementById("hiddenElementId").style.display = "block";

此代码将隐藏元素的 display 属性设置为“阻止”，使其可见。

步骤 4 ：组合所有

要在嵌套元素上实现悬停效果，您可以使用以下内容脚本：

var left1 = document.querySelector(".left1");
var right1 = document.querySelector(".right1");

var leftElement = document.querySelector(".left");
leftElement.addEventListener("mouseover", function() {
  left1.style.display = "block";
});

leftElement.addEventListener("mouseout", function() {
  left1.style.display = "none";
});

var rightElement = document.querySelector(".right");
rightElement.addEventListener("mouseover", function() {
  right1.style.display = "block";
});

rightElement.addEventListener("mouseout", function() {
  right1.style.display = "none";
});

此脚本有效修改隐藏元素的显示属性，使其在相应的可见元素悬停时可见。

以上是JavaScript 如何动态改变 CSS 属性以在嵌套元素上创建悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！