Pseudo-element ...
Hi everyone
I realise this effect
https://codepen.io/alpha_66/pen/dyQEEOd the problem is when I put the cursor here
the link is shaking.
https://codepen.io/alpha_66/pen/dyQEEOd the problem is when I put the cursor here
the link is shaking.
6 Replies
can I get some idea
to fix it
what's happening, is that your hover is translating the element up, which is moving the element away from the cursor, which in turn removes the hover state, which moves the element back under the cursor, which turns the hover state back on
I think you might be able to solve it by changing the size of the element rather than translating it up, or by putting the hover on a parent element and moving the child
An additional reason as to why this is happening is that you are hovering over the pseudo element which is much wider than the text link due to your letter spacing of 100px (which you have added to create the animated effect).
This pseudo element can't be seen as you have set its opacity to "0" but it still there and therfore gets the hover.
As the animation then reduces the letter spacing back to 3px, this reduces the width of the container so, as @jochemm pointed out, the mouse is no longer over the element. This means that the mouse is no longer hovering over the element and you get the effect that you have seen.
The solution - add
pointer-events: none;to the pseudo element so it won't be affected by the mouse.
By the way, I love the animation effect that you achieved by altering the letter spacing - I have never seen that done like that beforeHi Chris I was waiting a answer for you
Thanks Chris problem solve
🙂
I can't spend as much time as I used to helping out here as I have just started a new job and it is taking up most of my time (not that I'm complaining)
OK thanks