Jquery mousemove、mouseout和 hover 运用

最新推荐文章于 2024-01-01 09:00:00 发布

cd ~/Homestead

最新推荐文章于 2024-01-01 09:00:00 发布

阅读量868

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaoyangxiaodong/article/details/26391185

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

index.html

<html>
	<head>
		<title>测试</title>
	<link href="http://d260288701.blog.163.com/blog/index.css" rel="stylesheet" type="text/css" />
	<script src="http://d260288701.blog.163.com/blog/jquery.js"  language="javascript"></script>
	</head>

<body>
	<div class="tab1">
		<input type="hidden" value="小董">
        <input type="hidden" value="小董简介">
    </div>
	<div class="tab1">
		<input type="hidden" value="徐导">
        <input type="hidden" value="徐建简介">
    </div>
	<div class="tab1">
		<input type="hidden" value="牛啦">
        <input type="hidden" value="牛啦简介">
    </div>
	<div class="tab1">
		<input type="hidden" value="小东">
        <input type="hidden" value="小东简介">
    </div>
	<div class="tab1">
		<input type="hidden" value="小龙">
        <input type="hidden" value="小龙简介">
    </div>



	<div id="result">
		<input  type="text" value="nicheng2">
        <input type="text" value="jianjie2">
    </div>
</body>
<script>
	$(function(){

		//第一种mousemove 和 mouseout
		/*$(".tab1").mousemove(function(e){
			var userid=$(this).children('input').eq(0).val();
			var jianjie=$(this).children('input').eq(1).val();
			var offset= $(this).offset();
			var left=offset.left+152;
			var top=offset.top-8;			
			$('#result').css("margin-left",left+"px");
			$('#result').css("margin-top",top+"px");
			$("#result").children('input').eq(0).val(userid);
			$("#result").children('input').eq(1).val(jianjie);
			$("#result").show();

		})

		$(".tab1").mouseout(function(){
			$("#result").hide();
		})*/
		//第二种用hover 防止抖动、消耗系统资源
		$(".tab1").hover(
		  function () {
			var userid=$(this).children('input').eq(0).val();
			var jianjie=$(this).children('input').eq(1).val();
			var offset= $(this).offset();
			var left=offset.left+152;
			var top=offset.top-8;			
			$('#result').css("margin-left",left+"px");
			$('#result').css("margin-top",top+"px");
			$("#result").children('input').eq(0).val(userid);
			$("#result").children('input').eq(1).val(jianjie);
			$("#result").show();
		  },
		  function () {
			$("#result").hide();
		  }
		);	



	})

</script>
</html>

index.css

.tab1{
	background:red;
	width:150px;
	height:150px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}
#result{
	background:#E0C3C3;
	width:120px;
	height:120px;
	margin-top:200px;
	font-size:18px;
	color:black;
	position:absolute;
	display:none;
	
}

jquery .js 自己去网上下一个

cd ~/Homestead

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery mousemove、mouseout和 hover 运用

index.html 测试 $(function(){ //第一种mousemove 和 mouseout /*$(".tab1").mousemove(function(e){ var userid=
复制链接

扫一扫

专栏目录