81,122
社区成员
发帖
与我相关
我的任务
分享jq鼠标移入移出事件
有两个标签 A标签 和B标签，两个标签有一段距离。
1 .鼠标移动到A，B显示，然后鼠标还能移动到B上，鼠标移动到B上继续显示，移出B，B影藏。
2 .鼠标移动到A，B显示，鼠标不移动到B上，然后鼠标移出B，影藏。
我现在想问：因为A和B之间有空隙，我给A添加的mouseleave事件，直接将B影藏了，我的鼠标就点不到B上了。有没有什么方法能够满足我的 1 2 的要求？
1 .鼠标移动到A，B显示，然后鼠标还能移动到B上，鼠标移动到B上继续显示，移出B，B影藏。
2 .鼠标移动到A，B显示，鼠标不移动到B上，然后鼠标移出B，影藏。
我现在想问：因为A和B之间有空隙，我给A添加的mouseleave事件，直接将B影藏了，我的鼠标就点不到B上了。有没有什么方法能够满足我的 1 2 的要求？
...全文
请发表友善的回复…
发表回复
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
- 打赏
- 举报
我觉得很正常啊，当鼠标经过a，显示b，但是不点进去，鼠标移出a，b就在影藏，你要是在B显示的时候需要切换什么，你点进去。只是AB之间有空隙，完成不了，要判断。没有空隙就可以实现这个了。
qq_35721656 2016-12-06
- 打赏
- 举报
我朋友告诉我，用鼠标所在的标签做判断，我不会。。
z77z 2016-12-06
- 打赏
- 举报
只知道使用者移出A了，是不能做判断的，
z77z 2016-12-06
- 打赏
- 举报
移出A这只是一个动作条件，怎么判断是该隐藏B，还是继续显示B。
z77z 2016-12-06
- 打赏
- 举报
相当于你移出A，你还要知道使用的人是想移动到B上还是不移动到B上，这个不能用代码实现吧 ，本身业务逻辑就有问题
qq_35721656 2016-12-06
- 打赏
- 举报
就是因为矛盾才出来寻求答案
roger-jie 2016-12-06
- 打赏
- 举报
2个条件有点矛盾
qq_35721656 2016-12-06
- 打赏
- 举报
这个会啊，但是我移出鼠标，该显示的就又影藏了，还是点不到。
__LLLL__ 2016-12-06
- 打赏
- 举报
试试mouseover，和mouseout配合使用
qq_35721656 2016-12-06
- 打赏
- 举报
sorry，第二个标点符号写错了，意思不明确：2..鼠标移动到A，B显示，鼠标不移动到B上，鼠标直接移出A，B影藏。
