JavaScript 如何動態改變 CSS 屬性來控制懸停時元素的可見度？

使用 JavaScript 更改 CSS 屬性

透過使用 JavaScript 動態調整 CSS 屬性來增強使用者介面是 Web 開發中的常見要求。為了說明這一點，讓我們檢查一個特定場景，其中將滑鼠懸停在

上。元素應該觸發另一個

的可見性。

實現：

要實現此效果，可以操作目標元素的 style 屬性。考慮以下標記：

<div class="left">Hello1</div>
<div class="center">
  <div class="left1">Bye1</div>
  <div class="right1">Bye2</div>
</div>
<div class="right">Hello2</div>

預設情況下，使用 display: none 隱藏 left1 和 right1 元素。為了使它們在懸停時可見，可以將JavaScript 事件偵聽器附加到左側和右側容器：

// Handle hover event for the left container
document.querySelector(".left").addEventListener("mouseover", function() {
  document.querySelector(".left1").style.display = "block";
});

// Handle hover event for the right container
document.querySelector(".right").addEventListener("mouseover", function() {
  document.querySelector(".right1").style.display = "block";
});

當相應的懸停事件發生時，此腳本將隱藏元素的顯示屬性設定為“阻止”觸發，使它們可見。

其他注意事項：

• 對於跨瀏覽器相容性，您可能需要處理供應商前綴（例如-webkit-border、-moz-border ）。
• 使用類別可以是設定元素樣式和管理其狀態的更有效方法。
• 考慮效能最佳化，例如在設定樣式時僅針對必要的元素。

以上是JavaScript 如何動態改變 CSS 屬性來控制懸停時元素的可見度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！