基于jquery的鼠标滑动详细显示框

最新推荐文章于 2024-07-13 14:58:19 发布

原创最新推荐文章于 2024-07-13 14:58:19 发布 · 583 阅读

1 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单效果：当鼠标悬停在一个特定的HTML元素上时，显示并跟踪鼠标的相对位置的一个子元素；当鼠标离开该元素时，子元素将被隐藏。此功能通过绑定mouseenter、mousemove和mouseleave事件来实现。

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

jquery版本是1.x

HTML代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>detialDiaLog</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/detialDiaLog.js"></script>
<style type="text/css">
.detial{
	width:100px;
	height:100px;
	border:1px solid #000;
	position:relative;
	cursor: pointer;
}
.detialHide{
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100px;
	height:30px;
	background:green;
}
</style>
</head>
<body>
	<div class="detial">
		<div class='detialHide' name="detialHide">
			详细文字
		</div>
	</div>
	
</body>  
</html>

js代码为：

// JavaScript Document
$(document).ready(function() {
	$(".detial").live('mouseenter',function(){
		$(this).find("div[name='detialHide']").show();
	});
    $(".detial").live('mousemove',function(e){
		$(this).find("div[name='detialHide']").css({top:e.pageY+10,left:e.pageX+10});
	});
	$(".detial").live('mouseleave',function(){
		$(this).find("div[name='detialHide']").hide();
	});
});

效果图为：