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