当don't移动鼠标并在移动时出现

make button disappear when don't move mouse and appear when move it

本文关键字：移动 鼠标 don      更新时间：2023-09-26

我希望我的按钮只在移动鼠标时出现，否则就看不到。它是固定定位的。

类似这样的东西：

var justHidden = false;
$(document).ready(function() {
    var j;
    $(document).mousemove(function() {
        if (!justHidden) {
            justHidden = false;
            clearTimeout(j);
            $('.btn').removeClass('hidden');
            j = setTimeout('hide();', 1000);
        }
    });
});
function hide() {
    $('.btn').addClass('hidden');
}
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <button class="btn hidden">Click me</button>
  </body>
</html>

Html代码：

<!DOCTYPE html>
<html>      
<body>
    <button id="btn1">Click me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

Js代码：

 <script>
    $(document).ready(function(){
        $("#btn1").on({
            mouseenter: function(){
                $(this).show();
            },  
            mouseleave: function(){
                $(this).hide();
            }
        });
    });
    </script>

如果您想在鼠标移动时隐藏按钮，可以使用以下示例-

1.在HTML文件中编写以下代码：

<button id='hide_button'>Button</button>

2.并在JS文件中添加以下代码：

var timeout = null
$(document).on('mousemove', function() {
    if (timeout !== null) {
       $('#hide_button').hide();
        clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
         $('#hide_button').show();
    }, 3000);
});

当鼠标移动时，按钮将被隐藏。否则，您应该在鼠标不活动3秒后看到该按钮。您可以使用此链接查看此示例-http://jsfiddle.net/bnfsukhx/

相关文章：