Add a CSS border on hover without moving the element
You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:
.jobs .item {
background: #eee;
border: 1px solid transparent;
}
.jobs .item:hover {
background: #e1e1e1;
border: 1px solid #d0d0d0;
}
<div class="jobs">
<div class="item">Item</div>
</div>
For elements that already have a border, and you don't want them to move, you can use negative margins:
.jobs .item {
background: #eee;
border: 1px solid #d0d0d0;
}
.jobs .item:hover {
background: #e1e1e1;
border: 3px solid #d0d0d0;
margin: -2px;
}
<div class="jobs">
<div class="item">Item</div>
</div>
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.
.jobs .item {
background: #eee;
border: 1px solid #d0d0d0;
}
.jobs .item:hover {
background: #e1e1e1;
box-shadow: 0 0 0 2px #d0d0d0;
}
<div class="jobs">
<div class="item">Item</div>
</div>
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:
<div class="jobs">
<div class="item">
content goes here
</div>
</div>
See fiddle for output: http://jsfiddle.net/dLDNA/
add margin:-1px;
which reduces 1px
to each side. or if you need only for side you can do margin-left:-1px
etc.