：hover的使用，即当鼠标指针移入元素时，所做出的样式设置
示例一
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>demo01</title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????ul li{ ???????????width: 300px; ???????????margin-top: 10px; ???????????background: #ff0000; ???????} ???????ul li:hover{ ???????????background: #000000; ???????} ???</style></head><body> ???<ul> ???????<li></li> ???????<li></li> ???????<li></li> ???</ul></body></html>以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的样式
示例二
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>demo01</title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.container{ ???????????width: 300px; ???????????height: 300px; ???????????border: 1px solid #ff9f5a; ???????} ???????.content{ ???????????width: 100px; ???????????height: 100px; ???????????background: #27e7ff; ???????} ???????.container:hover .content{ ???????????background: #000000; ???????} ???</style></head><body> ???<div class="container"> ???????<div class="content"></div> ???</div></body></html>以上示例中，当存在父子关系的时候，可以通过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；但是，子级：hover改变不了父级的样式
示例三
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>demo01</title> ???<style> ???????*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????.container{ ???????????width: 300px; ???????????height: 300px; ???????????border: 1px solid #ff9f5a; ???????} ???????.content{ ???????????width: 100px; ???????????height: 100px; ???????????background: #27e7ff; ???????} ???????.container:hover +.content{ ???????????background: #000000; ???????} ???</style></head><body> ???<div class="container"></div> ???<div class="content"></div></body></html> 以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则通过 .container:hover .content这样的写法是无效的，则需要通过“+”号，即 .container:hover +.content才能显示出效果；但是要注意两个元素的先后顺序哦~
不足之处，请多多指教…
css：hover伪类的使用
原文地址：http://www.cnblogs.com/Immortal-brother/p/7692571.html