Question

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

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

我加倍检查是否是我的代码或我铺设的方式，但我找不到任何错误。

还有其他人遇到过这个问题吗？如果是这样，你有没有找到解决这个奇怪事件的解决方案？

我在这里设置了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;的解决方案似乎让事情发生了变化，但是，当光标快速地在图像上来回徘徊时，它就会停止工作。仍在寻找解决方案。

Answer 1

问题似乎是由于这一行：

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

当我从jsfiddle（http://jsfiddle.net/d3tm39ra/2/）中删除它时，悬停效果正常。

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

Answer 2

我看到很多关于webkit和悬停问题的有点相关的帖子。但是这些解决方案似乎都没有解决这个问题。

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

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

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

<强> Fiddle

在CSS专栏中发现了一些奇怪的缺陷

2 个答案: