good afternoon.
Im trying to make a hover-able button with javascript. It works but the onmouseout function hide the div to soon. Not sure what im doing wrong here. I know you can use CSS to this but i would like to use javascript
<!DOCTYPE html>
<html>
<head>
<title>Pools</title>
</head>
<style>
.dropA
{
display:block;
}
.cloths
{
display:none;
}
</style>
<div>
<button id="menu" class="dropA" onmouseover="show()">Menu</button>
<div id="cloth" class="cloths" onmouseout="hide()">
<p>Dresses</p>
<p>Shirts</p>
<p>Pants</p>
</div>
</div>
<script>
function show()
{
let div=document.getElementById("cloth");
div.setAttribute("style","display:block; border:1px solid black;");
}
function hide()
{
let div=document.getElementById("cloth");
div.setAttribute("style","display:none;");
}
</script>
</body>
</html>