當我們在使用css中hover時,偶爾會遇到無效的情況,這真是讓人很焦急。那麼到底是什麼原因導致失效的呢?本篇文章就跟大家總結一下css中hover失效的原因。
css中hover的用法具體程式碼範例如下:
<style type="text/css"> .one { margin: 0 auto; width: 400px; height: 300px; background: #ced05d; } .two { margin: 0 auto; width: 100px; height: 100px; background: #5a5aea; } .three { margin: 0 auto; width: 200px; height: 100px; background: #4b9c49; } .four { margin: 0 auto; width: 300px; height: 100px; background: #7b4141; } .one :hover { background: #da56d0; } </style> <body> <h1>css中hover的用法测试</h1> <div class="one"> <div class="two"> </div> <div class="three"> </div> <div class="four"> </div> </div> </body>
無效原因總結:
一、上述程式碼測試時發現滑鼠經過class為one的時候背景不變,而經過one裡面的其他div背景顏色發生變化,說明了:hover前加空格,本身不會有:hover的效果,而後代元素會有:hover的效果。
二、只有後代元素和兄弟元素(緊接在元素後的兄弟元素)才有效果,其他的:hover會失效
三、類別名稱錯誤;
四、:hover 被放在:link 和:visited 之前也是無效的;
註:
提示::hover 選擇器可用於所有元素,不只是連結。
提示::link 選擇器設定指向未被訪問頁面的鏈接的樣式,:visited 選擇器用於設定指向已被訪問的頁面的鏈接,:active 選擇器用於活動鏈接。在 CSS 定義中,:hover 必須位於 :link 和 :visited 之後(如果存在的話),這樣樣式才能生效。
以上是為什麼有時候使用css中hover屬性會沒有反應? (例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!