1

http://prntscr.com/ajl4wh

При наведении на картинку, она двигается и убирается рамка. Нужно, чтобы картинка оставалась статичной. Как это сделать?

P.S.: использую position: fixed или position: absolute - всё едет

2
  • Пожалуйста, разместите пример прямо в вопросе.
    – VenZell
    25 мар 2016 в 7:02
  • Не нужно делать скриншоты кода. Вместо этого копируйте в вопрос сам код. (А то можно в ответ получить скриншот решения).
    – Nick Volynkin
    28 мар 2016 в 7:28

3 ответа 3

3

Это логично. Рамка(border) тоже формирует размер элемента, и он изменяются при её убирании - соответственно элемент сдвигается.

Просто сделайте рамку прозрачной, не убирая её:

#container img {
  border: 25px solid black;
}

#container img:hover {
  border-color: transparent;
}
<div id="container">
  <img src="https://placeimg.com/300/125/any" alt="какая-то картинка">
</div>

0

div {
  width: 4em;
  height: 4em;
  background: silver;
  border: 1em solid blue;
  float: left;
  margin: 1em;
}

div:first-child:hover {
  border-color: transparent;
}

div:first-child + div:hover {
  border: none;
  padding: 1em;
}
<div>1</div><div>2</div>

0

размеры элемента не включают себя размер границы border поэтому при добавлении границы размер элемента изменяется и он в свою очередь отодвигается. Если прописать в css "box-sizing:border-box;" то алгоритм вычисления размера элемента изменится и размер элемента будет включать в себя также размер border.

2
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 25 мар 2016 в 5:40
  • Неудачный вариант.
    – Qwertiy
    25 мар 2016 в 16:40

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