：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才能显示出效果；但是要注意两个元素的先后顺序哦~
不足之处，请多多指教…
![[BZOJ2095][Poi2010]Bridges 最大流（混合图欧拉回路）](http://pic.xiahunao.cn/[BZOJ2095][Poi2010]Bridges 最大流（混合图欧拉回路）)
