시간이 지나면 사라지는 div를 만들지 만 마우스를 가져 가면 div가 유지됩니다.

Question

몇 초 후에 팝업으로 나타나고 사라질 알림을 만들려고하지만 사용자가 마우스로 가리켜 서 사라지지 않게하고 싶습니다. 클릭 수를 줄이면 사라질 수 있지만 필요하지는 않습니다. html로 가져 가면 임베디드 루비와 상호 작용하여 타임 아웃을 막을 수있는 방법이 확실하지 않습니다. 나는 그것이 작동하도록 모든 것을 재구성해야 할 수도 있다는 것을 알고 있습니다.

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>

첫 번째 단계에서 당신이 mouseover에 다음 setTimeout 및 사용할 수 있습니다 : 여기에 (실행하는 것만으로는 충분하지) 관련 CSS와 HTML/ERB 조각입니다 또는 hover 이벤트의 경우 clearTimeout과을 사용하여 시간 초과 기능을 지울 수 있습니다 0은 적용되지 않습니다.

mouseout에서 다시 setTimeout을 사용하여 3 초 동안 계산을 시작할 수 있습니다.

또한 click 이벤트에 대해 언급 했으므로 click에 timeout 함수를 바로 호출 할 수있는 닫기 버튼을 추가했습니다.

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