Kevin Powell - Community•9mo ago

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/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

6 Replies

VinceAggrippino•9mo ago

Since the element with the animation moved, your mouse cursor isn't over it any more. So, it reverted to the style set by the selector without :hover.

anon-pradip•9mo ago

What could be the possible solution? But I have hover on the parent element, not on the child element and the position of parent element remains same

VinceAggrippino•9mo ago

When you hover your mouse cursor over .floating, it still counts as hovering over .card because .floating is a child element of .card. This is true even though .floating appears outside of the boundaries of .card (due to the transform property). When .card moves away for the animation, your mouse cursor is no longer hovering over any part of .card so the :hover style is no longer used. Notice that the problem only occurs if you hover over the bottom of the yellow square. If you hover over the top of the yellow square or any part of the red square, there's no problem because the mouse cursor is always hovering over .card. You've got the right idea when you put the animation properties on the parent element, but you broke it when you moved the child element outside of the parent element. To fix it, you need something that the mouse cursor is always over when you want the effect. One way to fix it would be with an invisible pseudo-element:

.card::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 50px);
}

.card::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 50px);
}

In my fork of your fiddle I tweaked a couple of things, but you can see this solution: https://jsfiddle.net/VAggrippino/2ap0kj5u/

"flickering on hover" - anon_pradip - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

anon-pradip•9mo ago

thanks bro that was awesome. but when I hover over below the .card and left side of the .floating, the .floating is still moving up. anyway thanks bruh

VinceAggrippino•9mo ago

No problem, just set the pseudo-element's size and position to be the same as the .floating element:

.card::after {
  content: '';
  display: block;
  width: 50%;
  height: 50%;

  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.card::after {
  content: '';
  display: block;
  width: 50%;
  height: 50%;

  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

I updated the fiddle.

anon-pradip•9mo ago

awesome bruda. very very thanks bruda.

Gaming

Programming

flickering on hover