html - 元素在变化

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>