zoukankan      html  css  js  c++  java
  • 伪元素 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{ 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>
    

      

  • 相关阅读:
    Wampserver主机服务配置方法
    工作记录
    Shell教程
    简单教程
    java笔记
    四轴飞行器
    ace文档
    马尔科夫模型参考
    电子书搜索
    免费电子书
  • 原文地址:https://www.cnblogs.com/nice2018/p/9699683.html
Copyright © 2011-2022 走看看