CSS中关于hover伪类的使用示例

来源：气奇美食网

：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>
 <p class="container">
 <p class="content"></p>
 </p></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>
 <p class="container"></p>
 <p class="content"></p></body></html>