hover用法： 必须-移入父级操作子级 也可以移入自己操作自己
1.对自身作用
ul li:hover { background: red; }
2.对自身的子集作用
ul li:hover a { background: red; }
3.对兄弟元素的作用
ul li:hover +li { background: red; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul,li{margin:0 ; padding: 0;} ul{width: 600px;height: 400px;border: 1px solid red; } li{list-style: none;float: left;font-size: 32px;margin-right: 25px;} ul li:hover +li { background: red; } /* ul:hover li { background: red; } */ </style> </head> <body> <div> <ul> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> </ul> </div> </body> </html>
转载于:https://www.cnblogs.com/nice2018/p/9699683.html
相关资源：css3 transitions和伪元素制作4种超酷鼠标经过hover动