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.
6 Replies
Pat66
Pat66•15mo ago
can I get some idea to fix it
Jochem
Jochem•15mo ago
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
Chris Bolson
Chris Bolson•15mo ago
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 before
Pat66
Pat66•15mo ago
Hi Chris I was waiting a answer for you Thanks Chris problem solve
Chris Bolson
Chris Bolson•15mo ago
🙂 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)
Pat66
Pat66•15mo ago
OK thanks
Want results from more Discord servers?
Add your server