Question

我在使用Google Chrome和Safari的网站上的图库中有一个显示错误。使用<div id="gallery_box"> <p> <img src=".../img01.jpg" /> <img src=".../img02.jpg" /> [...] <img src=".../img30.jpg" /> </p> </div>创建3列。但是第2列和第3列中显示的第一张图像显示不正确。当我将鼠标悬停在图像上时，会出现一种“闪烁”。我多久没有在Mozilla Firefox或MS Edge中出现此错误。

Demo

HTML：

gallery_box {
column-count: 3;
column-gap: 0;
text-align: center;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 0;
-webkit-column-gap: 0;
}

gallery_box p {
margin: 0;
padding: 0;
}

gallery_box img {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
display: block;
max-width: 97%;
margin: 0 0 4% 0;
opacity: 0.9;
transition: 0.5s ease;
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

gallery_box img:hover {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
opacity: 1.0;
transition: 0.5s ease;
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}

CSS：

<p>

function IncrementOne(int array[], int maxArrayInt, int maxArrayLength) { int i = maxArrayLength - 1; bool c = false; do { int p = array[i]; p = p + 1; c = p > maxArrayInt; if(c) array[i] = 0; else array[i] = p; i = i - 1; } while(c && i >= 0) }-标签由Wordpress自动创建。

Answer 1

您是否尝试过手动激活图像上的悬停状态，而该图像却无法正常工作？

此处的说明："Inspect" a hover element?

我对您的代码不太了解，无法从中获得任何超级有用的信息，但是您可能会从中得到一些线索，因为我缺乏获取知识。绝对可以看到第一列图像与第二列和第三列图像之间的行为不同。

此方法可能会对您有所帮助，因为您只能看到一个悬停过渡。在我看来，当我将鼠标悬停在鼠标上时，会有多个转换，这使得查看正在发生的事情变得更加困难。

图“ flicking”与列数

1 个答案: