伪元素 hover 的几种用法总结

最新推荐文章于 2024-04-19 15:57:51 发布

dianfengzao1245

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量967

点赞数

原文链接：http://www.cnblogs.com/nice2018/p/9699683.html

版权

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

dianfengzao1245

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
伪元素 hover 的几种用法总结

hover用法：必须-移入父级操作子级也可以移入自己操作自己1.对自身作用ul li:hover { background: red; }　　2.对自身的子集作用ul li:hover a { background: ...
复制链接

扫一扫