鼠标移动不显示样式，停留显示样式菜单案例(js 和 jq 两种方式实现)

我就是我 2021-07-24 19:36 220阅读 0赞

问题：定时器内，this指向window  
难点：移动不显示是指用定时器设置延迟显示，并且在离开事件时清除定时器，使得样式还未显示就被清除，使得在停留一段时间才会显示

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{ 
    				padding: 0px;
    				margin:0px;
    			}
    			
    			.box{ 
    				height:400px;
    				width:400px;
    				margin:50px auto;
    				border:solid 1px red;
    				position:relative;
    			}
    			.head{ 
    				height:50px;
    				width:400px;
    			}
    			
    			ul{ 
    				list-style-type:none;
    			}
    			ul>li{ 
    				float:left;
    				text-align: center;
    				width:100px;
    				height: 50px;
    			}
    			
    			.down{ 
    				position:relative;
    				height:350px;
    				width:400px;
    			}
    			.down div{ 
    				height:100%;
    				width:100%;
    				position: absolute;
    				display: none;
    			}
    			.head ul li.select{ 
    				border-bottom: solid 2px orange;
    			}
    			
    			.down>.select{ 
    				display: block;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<div class="head">
    				<ul>
    					<li class="select">腾讯</li>
    					<li>百度</li>
    					<li>淘宝</li>
    					<li>微信</li>
    				</ul>
    			</div>
    			<div class="down">
           			<div class="select2">腾讯腾讯腾讯腾讯</div>
            		<div>百度百度百度百度</div>
            		<div>淘宝淘宝淘宝淘宝</div>
            		<div>微信微信微信微信</div>
        		</div>
    		</div>
    		
    		<script>
    			var lis=document.querySelectorAll("li");
    			var divs=document.querySelectorAll(".down div");
    			var ul=document.querySelector("ul");
    			var timer=null;
    		
    			
    			for(var i=0;i<lis.length;i++)
    			{ 
    				
    				lis[i].onmouseover=function(event){ 
    					var event=event||window.event;
    					var that=this;
    					//清除之前的下划线 在当下添加下划线
    					timer=setTimeout(function(){ 
    							
    							for(var j=0;j<lis.length;j++)
    						{ 
    							
    							lis[j].className="";
    							divs[j].className="";
    							
    							if(lis[j]==that){ 
    								lis[j].className="select";
    								divs[j].className="select";
    							}
    						}
    					},300);	
    				
    				}
    					lis[i].onmouseout=function()
    					{ 
    						clearTimeout(timer);
    					}
    			}
    			
    		
    			
    		</script>
    		
    	</body>
    </html>

--------------------

<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
    
            .box { 
                height: 400px;
                width: 400px;
                margin: 50px auto;
                border: 1px solid red;
                position: relative;
            }
    
            .head { 
                height: 50px;
                width: 400px;
            }
    
            ul { 
                list-style: none;
            }
    
            ul li { 
                float: left;
                text-align: center;
                width: 100px;
                height: 50px;
                line-height: 50px;
            }
    
            .down { 
                position: relative;
                height: 350px;
                width: 400px;
            }
    
            .down div { 
                height: 100%;
                width: 100%;
                position: absolute;
                display: none;
            }
    
            .head ul li.select { 
                border-bottom: 2px solid orange;
            }
    
            .down div.select { 
                display: block;
            }
    
        </style>
        <script src="js/jquery-3.4.1.js"></script>
    </head>
    <body>
    <div class="box">
        <div class="head">
            <ul>
                <li class="select">腾讯</li>
                <li>百度</li>
                <li>淘宝</li>
                <li>微信</li>
            </ul>
        </div>
        <div class="down">
            <div class="select">腾讯腾讯腾讯腾讯</div>
            <div>百度百度百度百度</div>
            <div>淘宝淘宝淘宝淘宝</div>
            <div>微信微信微信微信</div>
        </div>
    </div>
    
    <script>
    	var lis=$('.head li');
    	var divs=$(".down div");
    	
    	var timer=null;
    	lis.mouseenter(function(){ 
    		
    		var index=$(this).index();
    		
    		var that=this;
    		//设置延迟显示
    		timer=setTimeout(function(){ 
    		//保持只有一个帝国时期 
    			
    		//去除class
    		lis.removeClass('select');
    		divs.removeClass('select');
    		$(that).addClass("select");
    		
    		divs.eq(index).addClass('select');
    		},1000)
    	}).mouseleave(function(){ 
    		clearTimeout(timer);
    	})
    	
    							
    								
    </script>
    
    </body>
    </html>