关于hover失效的问题

昨天在写静态网页的过程中发现有时候hover会不起作用，后面去查阅了资料，总结大概有以下原因：

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

css

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

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: 10px 20px 30px 40px;
    padding: 40px 30px 20px 10px;
    width: 50px;
    height: 60px;
    position: relative;
    display: inline-block;
    background-color: blue;
}
.def{
    margin: 10px 20px 30px 40px;
    padding: 40px 30px 20px 10px;
    width: 50px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: skyblue;
}
.jkl{
    margin: 10px 20px 30px 40px;
    padding: 40px 30px 20px 10px;
    width: 50px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: skyblue;
}
.mno{
    margin: 10px 20px 30px 40px;
    padding: 40px 30px 20px 10px;
    width: 50px;
    height: 60px;
    position: absolute;
    top: 60;
    left: 70;
    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: 50px;
    height: 60px;
}

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是没有作用了，当然即使你加上++也是没有用的！
这里写图片描述

四、低级错误什么的啦啦啦啦

还没有发现别的原因，先写到这里吧！