如何使用:hover修改不同類別的CSS？

如何使用:hover 修改另一個類別的CSS

有時您可能想要修改一個類別的CSS僅使用CSS 將滑鼠懸停在另一個類別的元素上時。如果您想在不依賴 JavaScript 的情況下創建具有視覺吸引力的效果，此技術特別有用。

僅CSS 解：

要單獨使用CSS 來實現此效果，有兩種主要方法：

• 您要修改的元素(F) 是您懸停在其上的元素(E) 的子元素，或
• F 是後來的- E 的兄弟姐妹或後代兄弟姐妹（E 在標記/DOM 中出現在F 之前）。

第一個選項：F 作為E 的子級

如果F是E 的子元素，您可以使用以下CSS 選擇器：

<code class="css">.item:hover .wrapper {
    color: #fff;
    background-color: #000;
}</code>

只有當.item 元素停留在該元素上時，此選擇器才會將指定的CSS 規則套用至.wrapper 元素。

第二個選項：F 作為E 的兄弟元素

如果F 是E 的兄弟元素，則可以使用以下CSS 選擇器：

<code class="css">.item:hover ~ .wrapper {
    color: #fff;
    background-color: #000;
}</code>

僅當.item 元素懸停在其上時，此選擇器才會將CSS 規則應用於.wrapper 元素，假設.wrapper 是.item 的直接同級元素。如果 .wrapper 是 .item 的直接兄弟，並且它們之間沒有其他元素，您也可以使用 .item:hover .wrapper。

JavaScript 解決方案：

如果您單獨使用 CSS 無法達到預期效果，可以求助於 JavaScript。這是一個簡單的範例：

<code class="javascript">document.getElementsByClassName('item')[0].onmouseover = function() {
    document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
};</code>

當 .item 元素懸停在其上時，此 JavaScript 程式碼將修改 .wrapper 元素的背景屬性。請注意，此解決方案不如純 CSS 方法那麼高效或優雅。

結論：

使用 CSS 或 JavaScript，您可以修改一個類別的 CSS基於另一個類別的懸停。僅使用 CSS 的解決方案因其效率和簡單性而更受青睞，但在 CSS 不足的情況下可以使用 JavaScript。

以上是如何使用:hover修改不同類別的CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！