元素正在发生变化

Question

我有此代码：

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>

我的问题是，当我在这些元素上移动鼠标时，它们会移动一些。如何删除它们的移位？

Answer 1

您的边界在每一侧都添加了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>

Answer 2

您看到的偏移是从无边框变为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;
}

Answer 3

解决方案：添加了“边框：15px实心#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>

Answer 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>