flickering on hover
when I hover at the bottom of the floating div, the floating div moves up due to translate propert but after like 1 second being the mouse cursor at the same position, the floating div comes to initial position. why is this happening?
<div class="main">
<a class="card">
<div class="floating">
</div>
</a>
</div>
styling:
.main{
height:100vh;
display: flex;
justify-content: center;
align-items:center;
}
.card{
background:red;
height:200px;
width:200px;
position:relative;
}
.floating{
height:100px;
width:100px;
background:yellow;
position:absolute;
transform:translate(50%, 150%);
transition:transform 0.5s ease;
}
.card:hover .floating{
transform:translate(50%, 130%);
cursor:pointer
}
https://jsfiddle.net/xshr73ma/30/
<div class="main">
<a class="card">
<div class="floating">
</div>
</a>
</div>
styling:
.main{
height:100vh;
display: flex;
justify-content: center;
align-items:center;
}
.card{
background:red;
height:200px;
width:200px;
position:relative;
}
.floating{
height:100px;
width:100px;
background:yellow;
position:absolute;
transform:translate(50%, 150%);
transition:transform 0.5s ease;
}
.card:hover .floating{
transform:translate(50%, 130%);
cursor:pointer
}
https://jsfiddle.net/xshr73ma/30/
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
