Add a CSS border on hover without moving the element

Question

I have a row that I am applying a background highlight to on hover     jobs  item hover       background   e1e1e1      border-top  1px solid  d0d0d0      However  as the border adds 1px additional to the element  it makes it  move   How would I compensate for the above movement here  without using a background image

User · Answer

Try this it might solve your problem   Css    item padding-top 1px     jobs  item hover       background   e1e1e1      border-top  1px solid  d0d0d0      padding-top 0      HTML    lt div class  jobs  gt       lt div class  item  gt          content goes here      lt  div gt   lt  div gt    See fiddle for output  http   jsfiddle net dLDNA

User · Answer

You can make the border transparent  In this way it exists  but is invisible  so it doesn t push anything around   x000D   x000D   jobs  item      background   eee     border  1px solid transparent      jobs  item hover      background   e1e1e1     border  1px solid  d0d0d0    x000D   lt div class  jobs  gt     lt div class  item  gt Item lt  div gt   lt  div gt  x000D   x000D   x000D   For elements that already have a border  and you don t want them to move  you can use negative margins   x000D   x000D   jobs  item       background   eee      border  1px solid  d0d0d0      jobs  item hover      background   e1e1e1      border  3px solid  d0d0d0      margin  -2px    x000D   lt div class  jobs  gt     lt div class  item  gt Item lt  div gt   lt  div gt  x000D   x000D   x000D   Another possible trick for adding width to an existing border is to add a box-shadow with the spread attribute of the desired pixel width   x000D   x000D   jobs  item       background   eee      border  1px solid  d0d0d0      jobs  item hover       background   e1e1e1      box-shadow  0 0 0 2px  d0d0d0    x000D   lt div class  jobs  gt     lt div class  item  gt Item lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

add margin -1px  which reduces 1px to each side  or if you need only for side you can do margin-left -1px etc

User · Answer

Add a border to the regular item  the same color as the background  so that it cannot be seen  That way the item has a border  1px whether it is being hovered or not

[css] Add a CSS border on hover without moving the element

Examples related to css