鼠标移动不显示样式，停留显示样式菜单案例(js 和 jq 两种方式实现)_html在浏览器页面检查鼠标移上去查看不到样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103392880

问题：定时器内，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>