时间戳

首页 > 解决方案 > 元素在变化

html - 元素在变化

问题描述

我有这个代码：

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>

我的问题是，当我在这些元素上移动鼠标时，它们会移动一点。我怎样才能消除它们的转移？

标签： htmlcss

解决方案

您的边框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>

推荐阅读