Html CSS列中发现了非常奇怪的缺陷

所以我在玩专栏的时候，当我把鼠标悬停在图片上时，偶然发现了一个非常奇怪的缺陷

在列的左侧，悬停效果可以完全正常工作。 …但在列的右侧，悬停效果被禁用

我仔细检查了一遍，看看是我的代码还是我的布局方式，但没有发现任何错误

还有其他人也经历过这个问题吗？如果是这样的话，你有没有找到解决办法来解决这个奇怪的问题

我在这里设立了一个办公室

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%);
}

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

HTML:

.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%);
}

<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背面可见性的解决方案：隐藏

似乎可以让事情移动，但是，当光标以快速的速度在图像上来回悬停时，它会停止工作。仍在寻找解决方案。

问题似乎是由以下几行引起的：

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

当我从jsfiddle（）中删除它时，悬停效果很好

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

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

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

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

var-img=document.querySelectorAll（'img'）；
对于（变量i=0；i

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

---

在Chrome中运行良好。值得注意的是，

img

元素不能是

ul

元素的直接子元素

ul

元素只能包含

li

子元素。看看您的JSFIDLE演示，这同样适用于

h2

元素。哪个浏览器？我原以为我也能看到这个问题，但后来我点击并滚动了一下，一切似乎都很好，即使在刷新页面之后。也使用Chrome。似乎对我有用它似乎对我有用。刚刚检查了James的意思，您似乎在li元素外留下了一个img和h2标记。这两个栏目都应该有自己的li，这可能是您使用浏览器的原因。有时对我有效，有时对我无效：/。非常奇怪（通过不断重新加载页面进行检查）。当它不工作时，我只是打开控制台，它开始为我工作。嗨@Richard Parnaby King-谢谢你的反馈！然而，当我在图像上快速来回移动光标时，它似乎不再在上面悬停。有什么办法可以解决这个问题吗？Hi@Rick Hitchcock--更奇怪的行为：当我从本地根调用图像时（例如：），灰度不起作用。。。你知道怎么解决这个问题吗？嗯，我无法复制。grayscale类在IE中似乎不起作用，但我假设您仍然在使用Chrome进行测试？是的，仍然在使用Chrome。。唉，这太难了。这的确是个奇怪的问题。我已经用本地文件和服务器根文件夹中的文件进行了测试，

grayscale

类无论如何都可以工作（使用Chrome）。你知道，我认为在列计数和过滤器兼容之前，我们都应该坚持使用两个宽度相等的div。谢谢大家的帮助，非常感谢！