jq鼠标移入移出事件

qq_35721656 2016-12-06 01:28:16
有两个标签 A标签 和B标签,两个标签有一段距离。
1 .鼠标移动到A,B显示,然后鼠标还能移动到B上,鼠标移动到B上继续显示,移出B,B影藏。
2 .鼠标移动到A,B显示,鼠标不移动到B上,然后鼠标移出B,影藏。


我现在想问:因为A和B之间有空隙,我给A添加的mouseleave事件,直接将B影藏了,我的鼠标就点不到B上了。有没有什么方法能够满足我的 1 2 的要求?
...全文
926 14 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
chro008 2016-12-06
  • 打赏
  • 举报
回复

<html>
<head>
<title>
delay test
</title>
<style type="text/css">
.container{width:500px;height:500px;margin:100px auto;}
#item_a{width:100px;height:100px;background-color:red;}
#item_b{width:100px;height:100px;background-color:blue;margin:100px;}
</style>
</head>
<body>
<div class="container">
	<div id="item_a"></div>
	<div id="item_b"></div>
</div>
</body>
<script type="text/javascript">
var objectA = document.getElementById("item_a");
var objectB = document.getElementById("item_b");

var time = 1000;
var timeout;
hideB();

objectA.onmouseover = function(){
	showB();
}

objectA.onmouseout = function(){
	hideB(time);
}

objectB.onmouseover = function(){
	if(timeout){
		clearTimeout(timeout);
	}
	showB();
}

objectB.onmouseout = function(){
	hideB();
}

function showB(){
	objectB.style.display = "";
}

function hideB(time){
	if(time){
		var promise = new Promise(function(resolve){
			resolve();
		}).then(sleep(time)).then(function(){
			objectB.style.display = "none";
		});
	}else{
		objectB.style.display = "none";
	}
}

function sleep(delay_time){
	return function(){
		return new Promise(function(resolve, reject){
			timeout = setTimeout(resolve, delay_time);
		});
	}
}



</script>
</html>
莉莉丝O-O 2016-12-06
  • 打赏
  • 举报
回复
z77z 2016-12-06
  • 打赏
  • 举报
回复
只有延迟B的隐藏才可以解决AB之间有间隙的问题,你总要给使用的人时间移动到B上面吧。
z77z 2016-12-06
  • 打赏
  • 举报
回复
除非你让B的隐藏用定时器,延迟个几秒钟,如果在这延迟的时间内没有移动到B 就让B 隐藏,如果在这延迟的时间内移动到B 了 就让之前的定时器失效,移出B再让B隐藏
qq_35721656 2016-12-06
  • 打赏
  • 举报
回复
引用 6 楼 qq_20954959 的回复:
相当于你移出A,你还要知道使用的人是想移动到B上还是不移动到B上,这个不能用代码实现吧 ,本身业务逻辑就有问题
我觉得很正常啊,当鼠标经过a,显示b,但是不点进去,鼠标移出a,b就在影藏,你要是在B显示的时候需要切换什么,你点进去。只是AB之间有空隙,完成不了,要判断。没有空隙就可以实现这个了。
qq_35721656 2016-12-06
  • 打赏
  • 举报
回复
引用 8 楼 qq_20954959 的回复:
只知道使用者移出A了,是不能做判断的,
我朋友告诉我,用鼠标所在的标签做判断,我不会。。
z77z 2016-12-06
  • 打赏
  • 举报
回复
只知道使用者移出A了,是不能做判断的,
z77z 2016-12-06
  • 打赏
  • 举报
回复
移出A这只是一个动作条件,怎么判断是该隐藏B,还是继续显示B。
z77z 2016-12-06
  • 打赏
  • 举报
回复
相当于你移出A,你还要知道使用的人是想移动到B上还是不移动到B上,这个不能用代码实现吧 ,本身业务逻辑就有问题
qq_35721656 2016-12-06
  • 打赏
  • 举报
回复
引用 4 楼 qq_28986643 的回复:
2个条件有点矛盾
就是因为矛盾才出来寻求答案
roger-jie 2016-12-06
  • 打赏
  • 举报
回复
2个条件有点矛盾
qq_35721656 2016-12-06
  • 打赏
  • 举报
回复
引用 2 楼 lilei_ndsc 的回复:
试试mouseover,和mouseout配合使用
这个会啊,但是我移出鼠标,该显示的就又影藏了,还是点不到。
__LLLL__ 2016-12-06
  • 打赏
  • 举报
回复
试试mouseover,和mouseout配合使用
qq_35721656 2016-12-06
  • 打赏
  • 举报
回复
sorry,第二个标点符号写错了,意思不明确:2..鼠标移动到A,B显示,鼠标不移动到B上,鼠标直接移出A,B影藏。

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧