關于hover失效的問題

昨天在寫靜态網頁的過程中發現有時候hover會不起作用，後面去查閱了資料，總結大概有以下原因：

一、 :hover前加了空格或使用了中文冒号

css

.abc{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: relative;
    display: inline-block;
    background-color: blue;
}
.def{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: absolute;
    top: ;
    left: ;
    display: none;
    background-color: skyblue;
}
.abc:hover .def{
    display: inline-block;
}
.ghi{
    background-color: #fff;
    width: px;
    height: px;
}
           

html

<div style="background-color: purple;display: inline-block;">
        <div class="abc"><div class="ghi"></div>
        <!-- 隻是為了顯示出盒子内容 -->
            <div class="def"></div>
        </div>
    </div>
           

這是一串正确的代碼，作用是當滑鼠移動到abc時會顯示出def。

但是如果将

.abc:hover .def{display: inline-block;}

改為

.abc :hover .def{display: inline-block;}

的話，該hover便會失去作用。

二、 active，visited，hover，link之間的關系

active < hover < visitied / link

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

三、hover隻會與子代元素元素及兄弟元素起作用

最開始使用hover屬性的時候發現它隻作用于它的子代元素，并且自帶設定屬性（style、class、id）的子代元素不受hover的影響。在做作業的過程中，會發現元素a會作用于自己不想要産生變化的元素，在這稱為元素b，剛開始第一個想法就是将b與a分隔開，進而與a成為了兄弟元素，但有想要a:hover單獨作用于b，這時發現代碼

a:hover .b{}

失去了效果，通過查詢資料了解到，當想要hover作用于兄弟元素時，代碼會發生相應的變化，我們需要在b前加上+号，即

a:hover +.b{}

。但後面的過程又發現，這個方法并不是對所有的兄弟元素都适用，通過了解得知，hover作用的兄弟元素，僅僅隻是對相鄰的兄弟元素有用。

.abc{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: relative;
    display: inline-block;
    background-color: blue;
}
.def{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: absolute;
    top: ;
    left: ;
    display: none;
    background-color: skyblue;
}
.jkl{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: absolute;
    top: ;
    left: ;
    display: none;
    background-color: skyblue;
}
.mno{
    margin: px px px px;
    padding: px px px px;
    width: px;
    height: px;
    position: absolute;
    top: ;
    left: ;
    display: none;
    background-color: skyblue;
}
.abc:hover .def{
    display: inline-block;
}
.abc:hover +.jkl{
    display: inline-block;
}
.abc:hover +.mmo{
    display: inline-block;
}

.ghi{
    background-color: #fff;
    width: px;
    height: px;
}
           

html

<div style="background-color: purple;display: inline-block;">
        <div class="abc"><div class="ghi"></div>
        <!-- 隻是為了顯示出盒子内容 -->
            <div class="def"></div>
        </div>
        <div class="jkl"><div class="ghi"></div>
        <!-- 隻是為了顯示出盒子内容 -->
        </div>
        <div class="mno"><div class="ghi"></div>
        <!-- 隻是為了顯示出盒子内容 -->
        </div>
    </div>
           

發現當滑鼠移向abc時，隻會顯示出def，jkl兩個盒子，可以看出對mno是沒有作用了，當然即使你加上++也是沒有用的！

四、低級錯誤什麼的啦啦啦啦

還沒有發現别的原因，先寫到這裡吧！