Question

我想只在移动鼠标时显示我的按钮，否则不会看到。它是固定的。

Answer 1

这样的事情：

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

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>

Answer 3

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

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/

不移动鼠标时按钮消失，移动鼠标时显示

3 个答案: