首頁  >  文章  >  web前端  >  如何使用:hover修改不同類別的CSS?

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

Barbara Streisand
Barbara Streisand原創
2024-11-03 01:35:02688瀏覽

How to Use :hover to Modify the CSS of a Different Class?

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn