jQuery hover()

Demonstration of jQuery's hover() function using slideUp() and slideDown()

by akmiecik

HTML

<div class="StayOpen"><a id="toggleSwitch_2" href="#"><img class="gray-scale-img wp-image-25" src="https://katiek.site/wp-content/uploads/2022/01/chi-street-1-1.jpg" width="50%; alt=""></a><p></p>
<div id="theBox_2">Peek-a-boo!</div>
</div>

CSS

#theBox_2{
    display: none; 
    width: 25vw;
    height: auto;
    background-color: #eaeaea;
    border-radius: 10px;
    box-shadow: 1px 1px 5px #000000;
    position: absolute;
    left: 50vw;
    top: 2vh;
    z-index: 9999;
	padding: 10px;
	font-family: 'Roboto';
	font-variant: small-caps;
	letter-spacing: 1px;
}
#StayOpen {
 background-color: red;            
}

JavaScript

jQuery(function($){
$(document).ready(function() {
     $(".StayOpen").hover(
    function() {
        $("#theBox_2").slideDown({duration: 1000})
    }, function() {
        $("#theBox_2").slideUp(500);
    });
});
});