首頁 > web前端 > css教學 > 如何使隱藏元素在將滑鼠懸停在其父元素上時更改其背景顏色?

如何使隱藏元素在將滑鼠懸停在其父元素上時更改其背景顏色?

Patricia Arquette
發布: 2024-11-22 03:04:15
原創
634 人瀏覽過

How do I make a hidden element change its background color when hovering over its parent element?

使用 CSS 操作懸停元素

在創建互動元素時,您在理解 CSS 懸停效果時遇到了困難。具體來說,您希望在將滑鼠懸停在特定元素上時顯示附加訊息,但提供的程式碼似乎無效。

要解決此問題,請記住在 CSS 中,您只能在元素上實現懸停效果它們是您將滑鼠懸停在其上的元素的直接後代。

考慮以下程式碼:

#cheetah {
  background-color: red;
  color: yellow;
  text-align: center;
}

a {
  color: blue;
}

#hidden {
  background-color: black;
}

a:hover > #hidden {
  background-color: orange;
  color: orange;
}
登入後複製

在此程式碼片段中,隱藏div 直接嵌套在懸停的元素內(帶有文字「Cheetah」的錨標記)。此修改可確保當您將滑鼠懸停在錨標記上時,隱藏的 div 的屬性會被修改。

可以在以下 URL 找到此程式碼的現場示範:http://jsfiddle.net/LgKkU/

以上是如何使隱藏元素在將滑鼠懸停在其父元素上時更改其背景顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板