how to fix this ?
When I use hover that time the whole elements is moving.. how can I fix 
14 Replies
Are you using border bottom on hover?
Yes bro
try using
box-shadow;or, set a transparent border for everything
then, on hover, change the border color
Or swap a margin for border
wont that trigger a re-layout?
instead of simply re-drawing that single element?
Make it position relative on hover
Hmm, it would
What's a re-layout/re-drawing?
Essentially if a web page is static and it's not being resized the browser doesn't need to recalculate the sizes and positions of elements. However, if you change the size of an element it needs to figure it out. The method I suggested changes properties that would change the size and so recalculations are needed. The end result should be the same with no shifting but it is still needing re-drawing. CSS animations are better at this because browsers know what to expect.
For most people there will be no noticeable effect unless the page has a lot of complexity, which the page shown seems to not have. But it is absolutely true that it is a non-zero amount more intensive. I would have gone for box-shadow but I think that shifting a margin wouldn't be bad as you'd want a margin anyway to create additional spacing below
thanks!
but in this case, the idea isn't to create space, but to add a border on hover. which is why i suggested to just have the transparent border and pretend it's a margin, which can then be recolored
i know there's the outline, but messing about with it without knowing what you're doing can make things pretty hard to use in an accessible way
Thank you guys 🙏😁
you're welcome
just out of curiosity, which solution did you use?