1

当您使用覆盖和溢出将鼠标悬停在缩略图上时，我试图获得全尺寸图像：隐藏和可见。

它在 Firefox 和 IE 中运行良好，但 Chrome 和 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;
}
4

3 回答 3

0

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

例如：

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

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

于 2013-07-01T19:43:13.650 回答
0

我在这里看到的唯一选择（作为部分解决方法）是为悬停的 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 中的一些错误）。

于 2013-04-08T07:27:10.100 回答
0

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

当然，制作它position: static（或简单地删除position: absolute）会使overflow: hidden工作正常，但你会遇到定位你的.img-full.

于 2013-03-28T08:59:07.083 回答