селектор при наведении на плавающие div рядом

Question

У меня проблемы с этим:

Jsfiddle.net

Как вы можете видеть, когда вы наводите курсор мыши на эти элементы, граница добавляется, но этоизменяет размеры и, в некоторых случаях, положение других элементов.

В некотором смысле за это отвечает объем текста (то есть, если я размещаю более или менее одинаковое количество символов в каждом элементевсе работает как положено), но я хотел бы иметь некоторую гибкость в отношении содержимого каждого div.

Как я могу решить эту проблему?

С уважением

Answer 1

Решение состоит в том, чтобы сначала задать ему белую рамку, а затем изменить цвет рамки. Блочная модель W3 включает границу в вычисленную ширину узлов DOM, поэтому при добавлении границы она должна пересчитать ширину и скорректировать содержимое.

http://jsfiddle.net/AlienWebguy/ePWNg/5/

Альтернативным решением было бы удалить ширину и высоту рамки по мере ее добавления, например так:

#my_div {
    width:100px;
    height:100px;
}

#my_div:hover {
    width:98px; /* Minus 1px for top, 1px for bottom border */
    height:98px; /* Minus 1px for left, 1px for right border */
    border:1px solid #000;
}

Answer 2

Вам нужно, чтобы граница уже существовала, чтобы при добавлении границы она не сдвигалась по ширине границы.

Итак, я установил белую границу, а затем изменил правую границу на цвет, который был у вас изначально. Затем при наведении курсора вся граница меняет цвет, поэтому нет необходимости в коррекции поля в 1px. Обновленная скрипка: http://jsfiddle.net/ePWNg/6/

.preview{
    width: 250px;
    float: left;
    padding: 1em;
    margin:0.2em;
    border: 1px solid white; /* this adds in the extra borders to begin with */
    border-right: 1px solid lightgray;
}

.preview:hover {
    border: 1px solid blue;
}