JavaScript 定时器鼠标悬停移入_js实现鼠标悬停关闭定时功能-CSDN博客

本文链接：https://blog.csdn.net/qq_37995109/article/details/85731141

<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			#qq {
				width: 200px;
				height: 400px;
				background: #F9C;
			}
			
			#title {
				width: 240px;
				height: 180px;
				background: #FC6;
				position: absolute;
				top: 10px;
				left: 220px;
				display: none;
			}
		</style>
		<script src="js/miaov.js"></script>
		<script>
			$(function() {
				var qq = $('qq');
				var title = $('title');
				//定时器 
				var timer=null;
				//当鼠标移入
				qq.onmousemove=show;
				//当鼠标移开
				qq.onmouseout=hide;
				
				//鼠标移入
				title.onmouseover=show;
				//鼠标移开
				title.onmouseout=hide;
				
				function show(){
					//关闭定时器 鼠标移入右侧
					clearInterval(timer);
					title.style.display='block';
					
				};
				function hide(){
					//定时器
					timer=setTimeout(function(){
						title.style.display='none';
					},200);
				};
			})
		</script>
	</head>

	<body>

		<div id="qq"></div>
		<div id="title"></div>
	</body>
	<script>
		/*定时器*
		 * var timer=setTimeout(函数,毫秒);//只执行一次
		 * clearTimeout(timer);
		 */
	</script>

</html>