Question

我在创建隐藏的彩色块时出现问题，然后在鼠标按下后显示（没有特定位置，在页面的任何位置），然后在那里停留2秒然后再次消失。直到另一次鼠标按下发生，整个事情再次发生。一直在试验＆＃39; .click（功能＆＃39;以及其他东西，但是避风港已经能够使它发挥作用。

目前我有像这样的DIV层......

HTML：

<div class="overlay"></div>

CSS：

.overlay {
position: absolute; 
z-index: 1000;
right: 240px;
top: 500px;
width: 1000px;
height: 100px;
background: rgba(255, 255, 200, 100);
}

我对javascript很新，所以任何建议都会非常有用。

Answer 1

jQuery（文档）可以解决问题，因为它会考虑单击整个文档而不是页面上的特定位置。

＆＃13;

jQuery(document).click(function(event) {
    var $div = $(".overlay");
    if ($div.is(":visible")) { return; }
    $div.show();
    setTimeout(function() {
        $div.hide();
    }, 2000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

这样做你需要一个目标div或元素来点击事件。这将允许您在整个文档中触发事件。

Answer 2

您可以在jQuery中使用setTimeout

$( "#target" ).on( "click", function() {
  $("#messageBox").hide().slideDown();
  setTimeout(function(){
      $("#messageBox").hide();        
  }, 2000);
});

#messageBox {
    display:inline-block;
 float:right;
 border:1px solid #060;
 background:#FFC;
 padding:10px 20px;
 box-shadow:2px 2px 4px #666;
 color:#060;
 font-weight:bold;
 display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="messageBox">
  Hi there.
</div>
<input type="button" id ="target" value="click"/>

鼠标按下后，Javascript Make Div显示2秒钟

2 个答案: