0

Делаю блок с постером. При наведении по макету должен появляться бордер, но не должен смещать при этом ни содержимое блока, ни увеличивать его размер.

В моём же случае, изменяется положение содержимого, сдвигается на 2px (толщина обводки).

Попробовал box-sizing, не помогло.

Подскажите, возможно ли это?

2 ответа 2

1

Вам нужно свойство outline

В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину.

.test {
  background: #999;
  height: 100px;
  width: 100px;
}

.test:hover {
  outline: 4px solid red;
}
<div class="test"></div>

0

Меняйте цвет бордера с transparent на нужный цвет

div{
 width: 100px;
 height: 100px;
 background-color: gray;
 border: 10px solid transparent;
 }
 
 div:hover{
  border: 10px solid red;
  }
<div></div>

Вариант с тенью

	div{
	 width: 100px;
	 height: 100px;
	 background-image: url("http://img.clipartall.com/emotion-smiley-faces-clip-art-clipart-best-emotion-faces-clip-art-631_632.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 margin: 10px;
	 overflow: hidden;
	 }

	 div:hover{
	  box-shadow: 0 0 2px 2px red;
	  }
<div></div>

3
  • Тогда у блока будет бордер цвета фона
    – c0n
    20 июн 2017 в 20:02
  • А у меня там стоим изображение которое полностью заполняет блок
    – c0n
    20 июн 2017 в 20:02
  • Тогда делайте через box-shadow, пример выше 20 июн 2017 в 20:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.