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中文網其他相關文章！