如何阻止div在悬停时移动答案

【问题标题】：How to stop div from moving with on hover如何阻止div在悬停时移动
【发布时间】：2017-01-05 21:04:09
【问题描述】：

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

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 会移动。我怎样才能防止这种情况发生？谢谢

【问题讨论】：

通过增加内容的大小来增加 div 的高度，我的建议是尝试将其设置为绝对值，这样您就可以将图片与当前 div 分离，从而避免调整大小

标签： css html hover

【解决方案1】：

问题是您需要将图像定位为absolute，这样swatches-container 在变大时不会调整大小。

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

您可以使用以下 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;
}

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

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

这是一个有效的 jsFiddle：LINK

【讨论】：

我试过你的链接，但它对我不起作用。我正在使用 Chrome 版本 28.0.1500.72。悬停事件对我没有任何帮助，只是想提醒您一下。
@Mike 你说得对，Chrome 在移动 :hover 对象时看起来有些问题。诀窍是用.swatch-img-block:hover .swatch-img 替换.swatch-img:hover。这样，所有浏览器都很高兴。我会更正我的答案。
它现在就像一个冠军！希望 user1977156 看看你的代码......干得好;）

【解决方案2】：

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

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

【讨论】：