Добавить границу CSS при наведении курсора, не перемещая элемент

Возможный дубликат:
CSS hover border делает встроенные элементы слегка отрегулированными

У меня есть строка, в которой я использую подсветку фона для наведения.

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

Однако, когда граница добавляет к элементу 1px дополнительный, он делает его "перемещаться". Как бы компенсировать вышеуказанное движение здесь (без использования фонового изображения)?

Ответы

Ответ 1

Вы создаете границу, но имеете тот же цвет, что и фон (или transparent, если вам не нужно поддерживать более старые версии IE (< 7).

.jobs .item {
    background: #eee;
    border-top: 1px solid #eee;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

Ответ 2

добавить margin:-1px;, который уменьшает 1px с каждой стороны. или если вам нужна только сторона, вы можете сделать margin-left:-1px и т.д.

Ответ 3

Попробуйте, это может решить вашу проблему.

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>

Смотрите скрипт для вывода: http://jsfiddle.net/dLDNA/

Ответ 4

Добавьте border в обычный элемент, тот же color, что и background, чтобы его не видно. Таким образом, элемент имеет border: 1px независимо от того, находится ли он в курсе или нет.