html - 如何创建一个一段时间后消失的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 秒。

此外，由于您提到了点击事件，我添加了一个关闭按钮，点击后可以立即调用超时函数。