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

使用 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中文網其他相關文章！