首頁  >  文章  >  web前端  >  css hover失效怎麼辦

css hover失效怎麼辦

藏色散人
藏色散人原創
2021-04-12 11:17:344054瀏覽

css  hover失效的解決方法:1、取消選擇器hover之間的空格;2、修改“active,visited,hover,link”順序;3、修改編寫方式為“a:hover .b {}”;4、取消hover的元素的行內式樣式。

css hover失效怎麼辦

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

關於css的:hover失效問題

參考:

  • #關於hover失效的問題

********************************我是分割線************** ******************************

1、網上百度的原因一般有以下幾種,

第一種是:

選擇器、:、hover之間有空格,或冒號是中文符號;

第二種是:

沒有注意active,visited,hover,link之間的生效順序的關係,

active < hover < visitied / link

其實是active需定義在hover之後才能起作用,而hover需定義在visited和link之後才會起作用。當然,前提是它們同時存在的時候。

第三種是:

hover只會與子代元素元素及兄弟元素運作。

ps:hover作用於兄弟元素時,僅只是對鄰近的兄弟元素有用,且要寫為a:hover .b{}

第四種是:

低級錯誤。

我自己寫的時候,發現hover不生效,但絕對不滿足上邊提到的前3中狀況。

最後發現,因為hover的元素存在行內式樣式,所以導致了hover沒有效果

ps:這個應該歸類為低階錯誤吧。

【推薦學習:css影片教學

#

以上是css hover失效怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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