logo标签列表

当鼠标移动时如何隐藏div元素，并在停止时显示？

jquerymouseevent
3
我有一个 div 盒子，无论何时我移动鼠标，都会出现一个带有其对应坐标的工具提示。我想要的是，如果我继续在 div 内部移动，我的工具提示将不会显示，但如果我停止移动，那么我的工具提示将出现。顺便说一下，我必须使用 jquery 中的 mouseover 事件，因为我需要提取每次移动鼠标时的坐标。
请帮帮我！并且也请提供示例。最好尽量不要使用插件。
谢谢！
<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>

我已经更新了，请看一下。 - kimbebot
2个回答
4

在jQuery中没有mousestop事件。但是这个 jQuery插件有你要找的相同事件。
例如 

$('#box').bind('mousestop', function() {
  // do stuff here 
});

解除绑定
 $('#box').unbind('mousestop');
4
我想这就是你想要的内容：

我认为这正是你所需要的：

$('.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);
});

Demo

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接