[Solved] CSS Pagination

[posterity576]

I’m trying to create a pagination snippet for my website, and I cannot seem to exclusively hover over one link without affecting the position state of another link. Here is the relevant link. For example, if you hover over 1, the 2 link appears to “jump” to the left and down a few pixels. I do not want that. Instead, I would like the links not being hovered over to remain static and not jump around capriciously. That being said, I would like (edit: LOVE) help with two things:

1. When hovering over a specific page number (e.g., page 1), I would like stop the other pages (e.g., pages 2 through n) from being affected by the first hover. I suspect this will involve manipulating padding.

2. Relatedly, I would like the border-radius-background-color combination to have sufficient padding from the number. At present, the border-radius and background seem to hug the number. I would like for this to also happen without affecting the position state of those links not being hovered over.

Thanks a bunch in advance for those who can help.

[Paulie_D]

Like this?

http://codepen.io/Paulie-D/pen/KlGkj

[Nabeel_ur_Rehman]

remove padding from :hover and apply padding on achor tag

[posterity576]

That was just what the doctor ordered, @Paulie_D. Thanks.

[Author]

Posts