我有一个div框，每当我搬过来，工具提示将与其相应的坐标出现。我想，如果我继续在div内移动，我的提示将不会被显示，但如果我停止移动，然后我的提示将会出现。顺便说一句，我不得不使用鼠标悬停事件的jQuery，因为我需要提取的坐标，每当我移动鼠标。
请帮忙！并请提供例子也是如此。并尽可能我不想使用插件。
谢谢！
到目前为止，我的进步：
<html>
<head>
<style>
#box {
border: 1px solid black;
width: 900px;
height: 450px;
margin: 0 auto;
margin-top: 50px;
}
#tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
display: none;
}
</style>
<script type="text/javascript" src='/libs/jquery/jquery.js'></script>
<script>
$(document).ready( function() {
var offsetX = 20;
var offsetY = 10;
$('#box').mouseover(function(e) {
var href = $(this).attr('href');
$('<div id="tooltip"><input type="text" id="coor"/> </div>').appendTo('body');
});
$('#box').mouseout(function(e) {
$('#tooltip').remove();
});
$('#box').mouseenter( function() {
// alert('entered');
});
var x = 0;
$('#box').mousemove(function(e) {
$('#tooltip').fadeOut('fast');
var doIt = function() {
$('#tooltip').fadeIn(500);
}
setTimeout(doIt, 2500);
$('#tooltip')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX);
$('#coor').val(e.pageX + '' + e.pageY);
});
});
</script>
</head>
<body>
<div id="box">
</div>
action: <input type="text" id="action" />
</body>
我想这是你所追求的：
$('.box')[0].onmousemove = (function() {
var onmousestop = function() {
$('.box').css('background-color', 'red');
}, thread;
return function() {
$('.box').css('background-color', 'black');
clearTimeout(thread);
thread = setTimeout(onmousestop, 1500);
};
})();
1500毫秒的延迟后，就会使盒变为红色，只要用户移动鼠标再次框会变成红色，刚刚替补为自己的行为。
jQuery的：
var onmousestop = function (){
$('.box').css('background-color', 'red');
}, thread;
$('.box').on('mouseenter',function (){
onmousestop();
}).on('mousemove',function (){
$('.box').css('background-color', 'black');
thread&&clearTimeout(thread);
thread = setTimeout(onmousestop, 3000);
});
有在jQuery的mousestop任何事件。但this jQuery插件有你正在寻找相同的事件。 例如
$('#box').bind('mousestop', function() {
// do stuff here
});
解除绑定
$('#box').unbind('mousestop');