如何使用:hover 修改另一個類別的CSS
有時您可能想要修改一個類別的CSS僅使用CSS 將滑鼠懸停在另一個類別的元素上時。如果您想在不依賴 JavaScript 的情況下創建具有視覺吸引力的效果,此技術特別有用。
僅CSS 解:
要單獨使用CSS 來實現此效果,有兩種主要方法:
第一個選項: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中文網其他相關文章!