JavaScript 定时器鼠标悬停移入

最新推荐文章于 2023-10-27 17:05:32 发布

Lvdon9

最新推荐文章于 2023-10-27 17:05:32 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_37995109/article/details/85731141

JavaScript 专栏收录该内容

106 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript创建一个简单的鼠标悬停显示效果，通过设置元素的样式和位置，并利用定时器控制显示与隐藏，实现响应式的用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>