anon-pradip
KPCKevin Powell - Community
•Created by anon-pradip on 11/2/2023 in #front-end
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/
} .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/
8 replies