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

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)?

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

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.

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/