Here’s the HTML ↓
<center>
<div id="eventDiv" onmouseover="mouseSlideIn()" onmouseout="mouseSlideOut()">
<div id="box"></div>
<!--Above is the red box i.e. inside the main DIV-->
</div>
</center>
Here’s the CSS ↓
body {
background: grey;
margin: 0;
}
#eventDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
background: powderblue;
border-radius: 20px;
transition: 0.8s;
transition-timing-function: ease;
}
#box {
position: relative;
background: red;
height: 150px;
width: 150px;
transition: 0.5s;
transition-timing-function: ease;
}
Here’s the JS ↓
function mouseSlideIn() {
document.getElementById("box").style =
"background: blue; height: 50px; width: 50px;";
}
function mouseSlideOut() {
setTimeout(function () {
document.getElementById("box").style = "";
document.getElementById("eventDiv").style = "";
}, 2000);
}
Goal :
- When I hover over the
id="eventDIV"(outer most div), theid="box"must shrink and change color. - When I hover out of the
id="eventDIV", theid="box"must return to its original size & color. - But, before the box returns to its original state, I want a delay of (let’s say
2000ms). - This is achievable with the help of
setTimeoutfunction.
Problems :
- When I hover out of the
id="eventDIV"before thesetTimeoutruns out which is2000ms, it breaks the code. - It doesn’t run appropriately when I hover over again (i.e.): Even when the cursor is inside the
id="eventDIV", themouseSlideOut()function gets executed, which was supposed to be called ononmouseoutevent; that is when I hover out. - It keeps repeating the same mistake until I refresh the code.
What have I tried :
- I have tried using
clearTimeoutfunction, but its doesn’t seems to help. - Some other methods that didn’t work.
Note:
- I am a novice in JS.
- I don’t want any changes in CSS/pseudo elements (
:hover). - I want to try it through JS (if possible).
- This is just practice code, I am going to implement this elsewhere (if it works).
- Thanks in advance.
