css - 如何阻止div在悬停时移动

Question

我想在将鼠标悬停在某些图像上时增加它们的大小。 请看下面的例子。这是选项测试(第三张图片):

http://livingfunky.webresponsive.co.uk/index.php/curtains/hand-made-curtains/test-hand-made-curtain.html

.swatches-container .swatch-img,
.swatches-container .swatch-span {
  margin:0 2px 2px 0;
}

.swatches-container .swatch-img {
  border:1px solid #eee;
  max-width:30px;
  max-height:28px;
  z-index: 0;
  position: relative;
}

.swatches-container .swatch-img.current {
  border:2px solid #333;
}

.swatches-container .swatch-span {}

.swatch-img:hover {
  border:1px solid #eee;
  max-width:60px;
  max-height:46px;
  left:10px;
  cursor:pointer;
  top: -20px;
  left: -20px;
}

我遇到的问题是，当我将鼠标悬停在第三个图像上时，div 会移动。我怎样才能防止这种情况发生？ 谢谢

Answer 1

问题是您需要将图像定位为 absolute ，这样 swatches-container如果它们变大，则不会调整大小。

因此，您可以将图像放入 <div class="swatch-img-block"></div>它保持小图像的大小，因此流程不会被不断增长的图像修改，并且您的图像将是 absolute相对于这些<div>定位

您可以使用以下 CSS 来做到这一点:

.swatches-container .swatch-img-block
{
    display:inline-block; /* displayed as inline elements */
    position: relative; /* so the images can be positioned relatively to this */
    width:30px; /* keeping the image size */
    height:28px;
}

并添加 position:absolute在.swatch-img:hover{ } .

编辑:看起来像是兼容性问题，最好替换 .swatch-img:hover选择器 .swatch-img-block:hover .swatch-img 。这样，如果指针位于 <div> 上，图像就会变大。包含图像(图像较小时的空间)。此外，它还避免了图像移出指针的问题。

这是一个工作的 jsFiddle : LINK