Добавить рамку CSS при наведении курсора мыши без перемещения элемента

Можно создать дубликат:
CSS hover border makes inline elements adjust slightly Добавить рамку CSS при наведении курсора мыши без перемещения элемента

У меня есть строка, что я подаю фоновую подсветку, чтобы при наведении курсора мыши.

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

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

источник

2012-03-08 David542

ли ваш элемент определенной высоты? Если это так, вы можете: 1) использовать 'box-sizing: border-box' (с необходимыми префиксами) для современных браузеров или 2) обмануть, добавив границу того же цвета, что и фон по умолчанию, и сбрить 1 пиксель с указанной высоты , – BoltClock

см. Мой ответ ниже и дайте мне знать, если я здесь отстаю, поэтому я лучше понимаю вашу проблему. – w3uiguru

188

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

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

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

Если элементы имеют определенную height и/или width, вы можете также использовать box-sizing:border-box;, так как эта коробка модель включает в себя заполнение и границы ширины в вычисленный размер, например:

.jobs .item { 
    background: #eee; 
    height: 40px; 
    box-sizing: border-box; 
} 

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

источник

2012-03-08 04:12:32 Duopixel

Кто-нибудь видел способ решить эту проблему с помощью атрибута CSS 'box-sizing: border-box;'? – tim

@tim да, он работает с 'box-sizing: border-box;' тоже. – Duopixel

Простой и он работает. Благодаря! Иногда очевидный ответ не столь очевиден, пока он не ударит вас в лицо. – SeanKendle

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

источник

2012-03-08 04:11:50 danapaige

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

источник

2012-03-08 04:12:51 Dips

Это было лучшее решение для меня, потому что в моем случае я установил границу 1px в элемент orignal и хочу, чтобы наведите курсор на более толстую границу (3px). Использование 'margin: -2px;' действительно работает. –

Действительно лучшее решение, когда толщина границы изменяется из одного состояния в другое. –

сэкономил мое время :) спасибо – medBo

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

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/

источник

2012-03-08 04:19:04 w3uiguru

вот новый: http://jsfiddle.net/fbfjw/3/embedded/result/ – Jack

http://s21.postimg.org/q8n11ng6v/test_2.png – Jack

Добавить рамку CSS при наведении курсора мыши без перемещения элемента

ответ

Смежные вопросы