Html Webkit（Chrome&；Safari）在溢出后留下人工制品：隐藏可见

我正在尝试使用覆盖和溢出：hidden&visible将鼠标悬停在缩略图上时显示完整大小的图像

它在Firefox和IE中运行良好，但Chrome和Safari会造成混乱。你可以在这里看到

这是我正在使用的CSS：

.img-thumb
{
    position:relative;
    height:60px;
    width:60px;
    overflow:hidden;
    padding:5px;
    font-family:Comic Sans MS, cursive, sans-serif;
    font-size:14px;
}
.img-full
{
    position:absolute;
    display:none;
    top:0px;
    left:0px;
}
.img-thumb:hover .img-full
{
    display:block;
    z-index:10;
}
.img-thumb:hover
{
    overflow:visible;
}

---

该错误似乎取决于

位置：绝对

（我已经在

位置：相对

上试过了，错误也出现了。）对于

.img full

---

当然，将其设置为

位置：静态

（或者简单地删除

位置：绝对

）会使

溢出：隐藏

正常工作，但您会遇到定位

的问题。img full

是我在这里看到的唯一选项（作为部分解决方法）就是给悬停的img拇指容器指定一个合适的高度（这样浏览器就可以准确地知道鼠标离开时要清除哪个框）

请参见一个工作示例，以查看修复-仅当已知悬停高度并且可以将其固定为css中的某个值时，才足够

---

在我看来，webkit太过优化了框鼠标出重新绘制的清理过程，在清理框时忽略了绝对定位的子对象-尽管悬停显示效果很好（我敢打赌这是webkit中的一些错误）。

我也遇到了同样的问题，但使用JS/jQuery解决了这个问题：

例如：

---

淡出（1）使元素在1ms内淡出，因此用户无法注意到效果。

可以添加HTML（或者更好的是，添加JSFIDLE）吗？你的链接似乎不起作用。链接对我起作用，我可以确认工件留在后台。这显然是一个bug。你是想解决问题还是等着解决？嗯。。。如果结果溢出屏幕，这不会发生。我对任何可行的解决方案都感兴趣，但正如你所说，我失去了在缩略图上定位的能力

.img-thumb:hover
{
    overflow:visible;
    height: 500px; /* when added clears the artefacts - but total height of hover must be known as set here and shall not change */
}

$(".img-thumb").hover(
  function () {
    $(".img-thumb > .img-full").show();
  },
  function () {
    $(".img-thumb > .img-full").fadeOut(1);
  }
);