I'm using jQuery
to hover on the button that activates a box, the box appears... so far fine, but it doesn't disappear when the cursor is already removed, how can I solve this?
$('.hover').hover(function(){
$('.box').css({
"display": "flex"
});
});
body{
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.box{
height: 200px;
width: 200px;
background-color: #ddd;
display: none;
align-items: center;
justify-content: center;
}
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="box">
<h1>HOVER</h1>
</div>
<button class="hover">hover</button>
You can use the mouseout method:
jquery .mouseout()
I removed the flex display from the body and placed the button in a div just to separate them in the example because if you leave it as it is, a problem occurs and that is that when you hover the mouse over it, the element with the id box appears and moves the button so the mouse stops being over it and therefore the element with the id box disappears. You must take that into account for your case.