1,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之后才会起作用。当然,前提是它们同时存在的时候。