4

所以当我加入一个悬停图像时，我正在玩弄柱子并偶然发现了一个非常奇怪的缺陷。

在列的左侧，悬停效果完全正常。...但在列的右侧，悬停效果被禁用。

我仔细检查了它是否是我的代码或我的布局方式，但我找不到任何错误。

有没有其他人也遇到过这个问题？如果是这样，您是否找到任何解决方案来解决这种奇怪的情况？

我在这里设置了一个jsfiddle。

CSS：

.column {
    margin-top: 5%;
    -moz-column-count: 2;
    -moz-column-gap: 30px;
    -webkit-column-count: 2;
    -webkit-column-gap: 30px;
    column-count: 2;
    column-gap: 30px;
}
img.grayscale {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease;
    /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden;
    /* Fix for transition flickering */
    clear: both;
    padding-top: 1em;
    padding-bottom: 1em;
    display: block;
}
img.grayscale:hover {
    -webkit-filter: grayscale(10%);
}

HTML：

<ul class="column">
 <li>text...</li>
 <img class="grayscale" src="http://i57.tinypic.com/2i9p8go.jpg" width="80%" height="auto" />
 <li>...text</li>
<ul>

编辑 01 @Richard Parnaby-King 的移除解决方案-webkit-backface-visibility: hidden;似乎让事情发生了变化，但是，当光标在图像上快速来回悬停时，它停止工作。仍在寻找解决方案。

4

2 回答 2

3

问题似乎是由于这一行：

-webkit-backface-visibility: hidden;
/* Fix for transition flickering */

当我从 jsfiddle ( http://jsfiddle.net/d3tm39ra/2/ ) 中删除它时，悬停效果可以正常工作。

为什么它会阻止悬停效果起作用？对不起，我不知道。

于 2014-11-24T11:30:51.847 回答
2

我看到很多与webkit和悬停问题相关的帖子。但似乎没有一个解决方案适用于这个问题。

通过一些实验，我想出了一些 JavaScript 代码，似乎可以解决这个问题：

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].style.width=  img[i].clientWidth+'px';
}

这显然会导致图像“唤醒”悬停事件。

小提琴

于 2014-11-24T15:00:36.170 回答