hover
今天写css样式的时候发现一个以前没注意到的问题，a:hover b{}这种方式没有改变b的样式。这种方法在以前产生下拉菜单效果的时候是有用的，但是下面这种情况却失效了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b{
display: none;
}
.a:hover .b{
display: block;
}
</style>
</head>
<body>
<p class="a">aaa</p>
<p class="b">bbb</p>
</body>
</html>
百度一下hover的使用方法也没有找到解决问题的方法。最后想到，下拉菜单是需要将改变的内容样式的那一个盒子或者其他标签放在悬停的标签当中。试了下，果然是有用的，下面这个代码就可以实现悬停改变css了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b{
display: none;
}
.a:hover .b{
display: block;
}
</style>
</head>
<body>
<p class="a">aaa
<p class="b">bbb</p>
</p>
</body>
</html>
除了使用悬停改变css之外还可以用js来实现悬停