admin管理员组文章数量:1335170
I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)
This is the jquery code I wrote:
$(document).ready(function() {
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}
The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?
I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)
This is the jquery code I wrote:
$(document).ready(function() {
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}
The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?
Share Improve this question asked Feb 9, 2011 at 19:49 King JulienKing Julien 11.3k24 gold badges95 silver badges132 bronze badges 4- This should help you.. link – Mohib Sheth Commented Feb 9, 2011 at 19:57
-
You do know jQuery has
.show()
and.hide()
functions that do what your functions are doing, just say$("BBB").show(); $("BBB").hide();
. – Orbling Commented Feb 9, 2011 at 19:58 - This is similar to the question asked here: stackoverflow./questions/4915977/… See the 3 answers I posted and the JSFIDDLE code. – Neil Commented Feb 9, 2011 at 19:58
- If you put your tooltip inside of the div that triggers it, a simple mouse over/out will work fine. See: jsfiddle/vfrQX – user1385191 Commented Feb 9, 2011 at 20:04
6 Answers
Reset to default 3First, put B
inside of A
:
<div class="a">
AAA
<div class="b">
BBB
</div>
</div>
Then, abandon your javascript and make life easier with plain old css:
.b
{
display: none;
}
.a:hover .b
{
display: block;
}
Edit - Here's a live example using the CSS technique: http://jsfiddle/gilly3/sBwTa/1/
Edit - If you must use the JavaScript, just add clearTimeout(time)
to show()
. But, let's also simplify your code:
$(function()
{
var time = 0;
function show()
{
clearTimeout(time);
$("BBB").show(); // Existing jQuery that does $().css("display","block")
}
function hide()
{
time = setTimeout(function()
{
$("BBB").hide();
}, 200);
}
$("AAA,BBB").mouseenter(show).mouseleave(hide);
});
There are a few small problems with your code. The one which is biting your right now is that you aren't clearing BBB's timeout when you enter AAA. You can fix this by adding a clearTimeout
to AAA's mouseover
handler.
Secondly, it's safest to clear this kind of timeout before you set it each time, so that you don't have your timeout tracking overwritten if something unexpected happens. (It's always safe to clear a timeout, even if it's invalid or has already occurred.)
Lastly, though this is most likely only a problem in your example code, you're leaking time
into the global object. ;-)
Try this instead:
$(document).ready(function() {
var time;
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
clearTimeout(time);
show();
});
$(this).mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}
Here's a script that works with meaningful function names that should make it easy to see what's going on. You have to cancel the hiding from mouseenter
on both divs.
$(document).ready(function() {
var timerId, delay = 300;
var a = $("#A"),
b = $("#B");
function stopHide() {
clearTimeout(timerId);
}
function showTip() {
b.show();
}
function startHide() {
timerId = setTimeout(function() {
b.hide();
}, delay);
}
a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
b.mouseenter(stopHide).mouseleave(startHide);
});
div {
border: 2px dashed firebrick;
float: left;
font-size: 50pt;
font-weight: bold;
padding: 5px;
margin: 5px;
}
#B {
display: none;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>
Previously at http://jsfiddle/92jbK/1/
You code is wrong :) Try this:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#AAA, #BBB {
width:100px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="BBB">
BBB
</div>
<div id="AAA">
AAA
</div>
<script src="http://www.google./jsapi"></script>
<script>
//VISIBLE
function hide() {
$("#BBB").css({'display':'none'});
}
function show() {
$("#BBB").css({'display':'block'});
}
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
// NOT VISIBLE
// function hide() {
// $("#BBB").css({'display':'none'});
// }
// function show() {
// $("#BBB").css({'display':'block'});
// }
$(document).ready(function() {
var time;
$("#AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("#BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("#BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
});
</script>
</body>
</html>
one alternative is to use jquery's tooltip http://flowplayer/tools/tooltip/index.html
then you can just do for example:
$('#A').live(function() {
$(this).tooltip({
relative: true,
position: 'top center',
delay: 200,
effect: !$.browser.msie ? 'fade' : 'toggle',
fadeInSpeed: 100,
fadeOutSpeed: 50,
predelay: 500
});
});
and you just make div b of class tooltip
Is time
declared outside all of this?
It is not in the same scope in the two functions you have it in above, so is not the same variable so the clearTimeout()
call has no effect.
Declare it outside both with var time;
, so that they refer to the same variable.
本文标签: javascriptCancel setTimeout if mouse is over divStack Overflow
版权声明:本文标题:javascript - Cancel setTimeout if mouse is over div - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742269970a2444118.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论