如何创建一个 div ，它会在一段时间后消失，但悬停会保留它？

Question

我正在尝试创建一个会弹出并在几秒钟后消失的通知，但我希望用户能够将鼠标悬停在它上面以防止它消失。如果可以的话，我还想点击一下让它消失，但这不是必需的。我不确定如何让 html 中的悬停与嵌入式 ruby 交互以停止超时。我知道我可能需要重组整个事情才能让它发挥作用。这是相关的 css 和 html/erb 片段（不足以运行）：

setTimeout(function() {
  $('#alert_box').fadeOut('fast');
}, 3000);

.alert_wrap {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  justify-self: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<% unless notice == nil %>
<div id="alert_box" class="alert_wrap">
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
</div>
<% end %>

Answer 1

var myTimeOut = setTimeout("mytimeoutfunction()", 3000);
$('#alert_box').mouseout( function () {
  myTimeOut = setTimeout("mytimeoutfunction()", 3000)
});

$('#alert_box').mouseover( function () {
  clearTimeout(myTimeOut);
});

var mytimeoutfunction = function () {
  $('#alert_box').fadeOut('fast');
}

// On click, fadeout
$("#close").click(mytimeoutfunction);

.alert_wrap {
 padding: 0px 50px;
 margin-top: 3px;
 height: 5%;
 background-color: rgba(255, 0, 0, .3);
 border: 3px solid red;
 grid-row-start: 2;
 justify-self: center;
}
#alert_box {
  position: relative;
}
#close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alert_box" class="alert_wrap">
 <p class="notice">This is notice text</p>
 <p class="alert">This is alert text</p>
    <span id="close">X</span>
</div>

第一步你可以使用setTimeout，然后在mouseover或hover事件上，你可以使用clearTimeout清除超时功能，因此fadeout不会生效。

并且在 mouseout 您可以再次使用 setTimeout 开始计时 3 秒。

另外既然你提到了点击事件，我添加了一个关闭按钮，点击后可以立即调用超时功能。

Answer 2

您可以使用 CSS 动画处理它：

.alert_wrap {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  animation: alert 4s linear none;
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes alert {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
}

.alert_wrap:hover {
  opacity: 1;
}

<div class="alert_wrap">
  <p>Some alert</p>
</div>

Answer 3

这样的方法也可能有效，但我可能会使用 CSS 转换（再次使用 :not(:hover) 伪选择器）

var handler = setInterval(hideBox, 100); // interval function

function hideBox() {
  if ($('.alert_wrap:not(:hover)').length) { // check if the alert is visible and not hovered
    setTimeout(function() { // after 3 seconds
      if ($('.alert_wrap:not(:hover)').length) { // if not hovered yet
        $('.alert_wrap:not(:hover)').fadeOut('fast');
        clearInterval(handler);
        handler = 0;
      }
    }, 3000);    
  }
}

如何创建一个 div ，它会在一段时间后消失，但悬停会保留它？

How to create a div which disappears after a time, but hovering will keep it?

html

css

ruby-on-rails

embedded-ruby