简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

hover不起作用怎麼辦

藏色散人
發布： 2023-01-03 09:27:15
原創
9130 人瀏覽過

hover不起作用的解決方法：1、檢查並刪除「:hover」前的空格；2、檢查並修改正確的類別名稱；3、檢查「:hover」是否被置於「: link」和「:visited」之前，修改位置即可。

hover不起作用怎麼辦

本教學操作環境：windows7系統、HTML5&&CSS3版，DELL G3電腦。

css中hover不起作用的幾個原因：

1.在設定: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>测试</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的效果。

【推薦學習：css影片教學】

2.當滑鼠經過時，讓其他元素改變樣式：

這時候你會發現，只有後代元素和兄弟元素（緊接在元素後的兄弟元素）才有效果，其他的:hover會失效

3.類名寫錯了；

#4.: hover 被放在:link 和:visited 之前了;

在CSS 定義中，a:hover 必須被置於a:link 和a:visited 之後，才是有效的。

在 CSS 定義中，a:active 必須被放在 a:hover 之後，才是有效的。

以上是hover不起作用怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
hover
來源：php.cn
上一篇：你可能不了解的16 個提升佈局效率的 CSS 偽類！ ！ 下一篇：css內邊框線怎麼設定
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在class='btn'的元素之後加上"<"，並在元素被:hover:after之後替換原始內容 在':hover'上的輸出總是“1IPSUM”如果我決定添加一個':before'元素，內容為'content:"1"'，它只會添加一個1，使得在hover之前...
來自於 2023-09-09 12:32:51
0
2
319
點擊後如何改變文字的顏色？ 我想要做的是改變按鈕背景的顏色，同時改變按鈕內部的文字顏色。按鈕的顏色已經改變，但文字顏色沒有改變。我嘗試將hover應用於文本，但只有在滑鼠觸摸文本時顏色才會改變。 <li...
來自於 2023-08-30 20:19:37
0
2
233
動態建立的元素上的事件綁定？ 我有一些程式碼，我循環遍歷頁面上的所有選擇框並將.hover事件綁定到它們，以在滑鼠上調整它們的寬度開/關。這發生在頁面準備好並且工作正常。我遇到的問題是，在初始循環之後透過Aja...
來自於 2023-08-23 15:04:33
0
2
197
根據瀏覽器大小自動調整解析度的全尺寸影像 我有一個貨運網站。如何使我的懸停圖片填滿整個螢幕，並且不受電腦螢幕解析度的影響。當我縮小瀏覽器視窗時，它們也應該進行裁剪和縮小。謝謝。 .hover-image{display:f...
來自於 2023-08-16 11:40:39
0
1
203
動態為多個元素添加:hover效果 是否有可能以程式設計方式為多個元素添加hover效果？在我們的系統中，有多個元素代表一個單元（但由於其他原因需要將它們分開成多個元素），在某些情況下，它們應該在懸停時一起重新著色。...
來自於 2023-08-15 23:49:58
0
1
179
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！