如何創建一段時間後消失的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 { 
 
\t padding: 0px 50px; 
 
\t margin-top: 3px; 
 
\t height: 5%; 
 
\t background-color: rgba(255, 0, 0, .3); 
 
\t border: 3px solid red; 
 
\t grid-row-start: 2; 
 
\t 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"> 
 
\t <p class="notice">This is notice text</p> 
 
\t <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轉換（再次使用：沒有（：懸停）僞選擇器）

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