Question

当您将鼠标悬停在缩略图上使用叠加层并溢出时，我正在尝试显示完整尺寸的图像：隐藏＆amp;可见。

它在Firefox和IE中运行良好，但Chrome和＆amp; Safari乱七八糟。你可以在这里看到它 Webkit artefact

这是我正在使用的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;
}

Answer 1

该错误似乎取决于position: absolute（我已在position: relative上尝试过，并且也出现了错误。）.img-full。

当然，将position: static（或只是删除position: absolute）设为overflow: hidden会使.img-full正常工作，但您会遇到定位{{1}的问题}}

Answer 2

我在这里看到的唯一选项（作为部分解决方法）是为悬停的img-thumb容器指定一个合适的高度（允许浏览器确切地知道在鼠标移出时清除哪个框）。

.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 */
}

请参阅http://jsfiddle.net/YqSVP/作为一个工作示例来查看修复 - 只有在知道悬停高度并且可以将其固定为css内的某个值时才足够。

在我看来，webkit正在优化太多的盒鼠标清理程序，并在清理盒子时忽略了绝对定位的孩子 - 尽管悬停时的显示工作正常（我敢打赌这是一些错误） WebKit的）。

Answer 3

我有同样的问题，但使用JS / jQuery解决了：

E.g：

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

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

Webkit（Chrome＆amp; Safari）在溢出后留下了人工制品：隐藏可见

3 个答案: