Элементы меняются

У меня есть такой код:

figure {
  background-color: #FFFFFF;
  text-align: center;
}

figcaption {
  font-style: italic;
  font-weight: bold;
}

figure em {
  font-weight: bold;
}

figure:hover,
figure:focus {
  background-color: rgba(255, 224, 224, 0.5);
  border: 15px inset #CCCCCC;
}

<figure>
  <figcaption>Indesit IWSND</figcaption>
  <img src = "obrazky/indesit-IWSND.jpg" width = "220" height = "220" alt = "Indesit">
  <p>6 kg, 1200 ot/min.,A++</p>
  <p><em>229.00 &euro;</em></p>
</figure>
<figure>
  <figcaption>Rowenta RO5396OA</figcaption>
  <img src = "obrazky/rowenta-RO5396OA.jpg" width = "220" height = "220" alt = "Rowenta">
  <p>1,5 L, B, 950 watt</p>
  <p><em>108.00 &euro;</em></p>
</figure>
<figure>
  <figcaption>ETA 050490000</figcaption>
  <img src = "obrazky/eta-05049000.jpg" width = "220" height = "220" alt = "ETA">
  <p>O10 meter, 350 watt, C</p>
  <p><em>79.90 &euro;</em></p>
</figure>

И моя проблема в том, что когда я перемещаю мышь по этим элементам, они немного сдвигаются. Как убрать их смещение?

html css

14.01.2019 04:19

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я думаю, что единственное решение, которое вы можете сделать, - это установить высоту для тега рисунка, например

figure {
	background-color: #FFFFFF;
	text-align: center;
  height: 150px;
}

figcaption {
	font-style: italic;
	font-weight: bold;  
}

figure em {
	font-weight: bold;
}   


figure:hover, figure:focus  {
background-color: rgba(255, 224, 224, 0.5);
border: 15px inset #CCCCCC;
}

<figure>
	<figcaption>Indesit IWSND</figcaption>
	<img src = "obrazky/indesit-IWSND.jpg" width = "220" height = "220" alt = "Indesit">
	<p>6 kg, 1200 ot/min.,A++</p>
	<p><em>229.00 &euro;</em></p>
</figure>
<figure>
	<figcaption>Rowenta RO5396OA</figcaption>
	<img src = "obrazky/rowenta-RO5396OA.jpg" width = "220" height = "220" alt = "Rowenta">
	<p>1,5 L, B, 950 watt</p>
	<p><em>108.00 &euro;</em></p>
</figure>
<figure>
	<figcaption>ETA 050490000</figcaption>
	<img src = "obrazky/eta-05049000.jpg" width = "220" height = "220" alt = "ETA">
	<p>O10 meter, 350 watt, C</p>
	<p><em>79.90 &euro;</em></p>
</figure>

14.01.2019 04:32

Ответ принят как подходящий

Ваша граница добавляет 15px с каждой стороны, таким образом сдвигая содержимое <figure>.

Если ваши элементы <figure>началось с заполнением 15px (выполняя padding: 15px), вы можете затем заменить это заполнение рамкой вставки 15px при наведении курсора, чтобы контент оставался на месте.

figure {
  background-color: #FFFFFF;
  text-align: center;
  padding: 15px;    /* Start with 15px of padding */
}

figcaption {
  font-style: italic;
  font-weight: bold;
}

figure em {
  font-weight: bold;
}

figure:hover,
figure:focus {
  background-color: rgba(255, 224, 224, 0.5);
  border: 15px inset #CCCCCC;
  padding: 0px;  /* Replace padding with border */
}

<figure>
  <figcaption>Indesit IWSND</figcaption>
  <img src = "obrazky/indesit-IWSND.jpg" width = "220" height = "220" alt = "Indesit">
  <p>6 kg, 1200 ot/min.,A++</p>
  <p><em>229.00 &euro;</em></p>
</figure>
<figure>
  <figcaption>Rowenta RO5396OA</figcaption>
  <img src = "obrazky/rowenta-RO5396OA.jpg" width = "220" height = "220" alt = "Rowenta">
  <p>1,5 L, B, 950 watt</p>
  <p><em>108.00 &euro;</em></p>
</figure>
<figure>
  <figcaption>ETA 050490000</figcaption>
  <img src = "obrazky/eta-05049000.jpg" width = "220" height = "220" alt = "ETA">
  <p>O10 meter, 350 watt, C</p>
  <p><em>79.90 &euro;</em></p>
</figure>

14.01.2019 04:47

Сдвиг, который вы видите, является результатом перехода от границы без рамки к границе 15 пикселей (которая сдвигает область на 15 пикселей). Самый простой способ исправить это - добавить белую рамку к стилю .figure. Он есть, но вы этого не заметите. Когда отображаются стили наведения / фокуса, местоположение .figure должно оставаться там, где оно было.

figure {
   background-color: #FFFFFF;
   text-align: center;
   border: 15px inset #FFFFFF;
}

figure:hover, figure:focus  {
  background-color: rgba(255, 224, 224, 0.5);
  border: 15px inset #CCCCCC;
}

Это хорошая техника, но могу ли я предложить использовать border: 15px inset transparent вместо белого. Использование белого будет работать только на белом фоне, тогда как transparent (или даже rgba(...) с 0 alpha) будет работать на фоне любой.

— 14.01.2019 04:49

14.01.2019 04:48

Решение: добавлена граница: 15px solid #fff; на фигуре состояние нормальное.

figure {
  background-color: #FFFFFF;
  text-align: center;
  border: 15px solid #fff;
}

figcaption {
  font-style: italic;
  font-weight: bold;
}

figure em {
  font-weight: bold;
}

figure:hover,
figure:focus {
  background-color: rgba(255, 224, 224, 0.5);
  border: 15px inset #CCCCCC;
}

<figure>
  <figcaption>Indesit IWSND</figcaption>
  <img src = "obrazky/indesit-IWSND.jpg" width = "220" height = "220" alt = "Indesit">
  <p>6 kg, 1200 ot/min.,A++</p>
  <p><em>229.00 &euro;</em></p>
</figure>
<figure>
  <figcaption>Rowenta RO5396OA</figcaption>
  <img src = "obrazky/rowenta-RO5396OA.jpg" width = "220" height = "220" alt = "Rowenta">
  <p>1,5 L, B, 950 watt</p>
  <p><em>108.00 &euro;</em></p>
</figure>
<figure>
  <figcaption>ETA 050490000</figcaption>
  <img src = "obrazky/eta-05049000.jpg" width = "220" height = "220" alt = "ETA">
  <p>O10 meter, 350 watt, C</p>
  <p><em>79.90 &euro;</em></p>
</figure>

14.01.2019 04:50

Другие вопросы по теме

Как сделать так, чтобы div, созданный в веб-приложении, отображался в верхнем левом углу родительского контейнера?

Как я могу заставить ползунок моего изображения исчезнуть? (без JQuery)

Как сделать так, чтобы изображение появлялось при наведении курсора на ссылку

Как мне установить слайдер внизу моей страницы?

Как заставить URL-адреса CSS уважать настройку publicPath webpack?

Bootstrap неправильно переопределяет CSS

Использование начальной загрузки, содержащей изображения большего размера, которые помещаются в статический блок меньшего размера

Сетка HTML создает раздражающие поля в правой части моей веб-страницы

Как равномерно распределить элементы на панели навигации

Gulp дублирование css при компиляции sass в один файл css

Элементы меняются

Ответы 4

Другие вопросы по теме

Похожие вопросы