昨天在写静态网页的过程中发现有时候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是没有作用了,当然即使你加上++也是没有用的!
四、低级错误什么的啦啦啦啦
还没有发现别的原因,先写到这里吧!