Question

这里我有一个图像库可以正常工作，但是当选择较小的图像时，悬停似乎会将所有小图像向下移动一点，这似乎会移动整个页面，这很烦人。我假设它与保证金或填充有关，而且我尝试了很多组合，但收效甚微。这是代码：

HTML

<div class="gallery_thumbnails">
  <div class="imagebox">
    <img onclick="preview.src=img1.src" name="img1" src="images/IMAGE GALLERY 1.png" alt="">
    <div class="text">HomeLobby</div>
  </div>

  <div class="imagebox">
    <img onclick="preview.src=img2.src" name="img2" src="images/IMAGE GALLERY 2.png" alt="">
    <div class="text">HomeLobby</div>
  </div>

  <div class="imagebox">
    <img onclick="preview.src=img3.src" name="img3" src="images/IMAGE GALLERY 3.png" alt="">
    <div class="text">HomeLobby</div>
  </div>

  <div class="imagebox">
    <img onclick="preview.src=img4.src" name="img4" src="images/IMAGE GALLERY 4.png" alt="">
    <div class="text">HomeLobby</div>
  </div>

  <div class="imagebox">
    <img onclick="preview.src=img5.src" name="img5" src="images/IMAGE GALLERY 5.png" alt="">
    <div class="text">HomeLobby</div>
  </div>
</div>

CSS：

.image_gallery {padding-top: 10px;
                text-align: center;}

.gallery_thumbnails img {height: 60px;
                         width: 106px;}

.gallery_thumbnails img:hover {
                               border: 3px solid #a22b2f;
                               cursor: pointer;}

.gallery_thumbnails {position: relative;}

.imagebox {display: inline;}

.text {display: none;
       position: absolute;
       left: 140px;
       top: -30px;
       font-family: Arial, Helvetica, sans-serif;
       font-size: 16px;
       color: white;
       font-weight: 700;}

.imagebox img:hover + .text {display: block;}

Answer 1

您在悬停时添加边框。这会产生3个额外的px并将所有内容都推下来。如果您的背景是纯色，则通常在元素上添加相同的边框，然后在悬停时更改颜色。

甚至更好......只需将box-sizing: border-box;添加到元素中，边框将占用块中的空间，而不会创建3个额外的px。

Answer 2

你的悬停边界正在推动元素，我建议添加

.gallery_thumbnails img:hover {
margin-top: -3px;
}

或

.gallery_thumbnails img { 
border: 3px solid transparent;
}

Answer 3

您的问题发生是因为您在悬停时添加了以前不存在的边框。这会占用空间，因此请将所有内容向下移动，以便为新边框腾出空间。

一种解决方案是在正常的未覆盖状态下添加相同的boder，但是给它一个透明的颜色，或者与背景颜色相同。这无形地保留了必要的空间：

.gallery_thumbnails img {height: 60px;
                         width: 106px;
                         border: 3px solid transparent;

另一种方法是使用outline属性而不是边框（语法相同）：

.gallery_thumbnails img:hover {
                               outline: 3px solid #a22b2f;
                               cursor: pointer;}

HTML悬停时会移动页面的其他部分

3 个答案: