偽元素 hover 的幾種用法總結


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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM