Question

我希望将鼠标悬停在图像上时增加一些图像的大小。请看下面的例子。这是选项测试（第3张图片）：

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

Answer 2

你可以在悬停时将img设置为绝对定位，swatches-container也必须相对定位：

.swatches-container
{
  position:relative;
}
.swatch-img:hover {
  position:absolute;
}

如何阻止div在悬停时移动

2 个答案: