css - 带有列数的 Img“轻弹”
问题描述
我使用 Google Chrome 和 Safari 在我的网站上的图库中出现显示错误。我创建了column-count
3 列。但是第 2 列和第 3 列中显示的第一张图像显示不正确。当我将鼠标悬停在图像上时,会出现一种“闪烁”。我多久没有在 Mozilla Firefox 或 MS Edge 中出现此错误。
HTML:
<div id="gallery_box">
<p>
<img src=".../img01.jpg" />
<img src=".../img02.jpg" />
[...]
<img src=".../img30.jpg" />
</p>
</div>
CSS:
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;
}
<p>
- 由 Wordpress 自动创建的标签。
解决方案
您是否尝试过手动激活图像上的悬停状态?
此处的说明:“检查”悬停元素?
我不太了解您的代码,无法从中获得任何超级有用的东西,但您可能会从中得到我缺乏知识的线索。您绝对可以看到第一列中的图像与第二列和第三列中的图像之间的不同行为。
此方法可能会对您有所帮助,因为您只能看到一个悬停过渡。在我看来,当我用鼠标光标悬停时,有几个过渡,使得更难看到发生了什么。
推荐阅读
- python - TensorFlow:将 CRF 用于 NER(形状不匹配)[tensorflow_addons]
- rstudio - RStudio 注释快捷方式 (Ctrl+Shift+C) 不起作用
- office-ui-fabric - react northstar fluent ui中的控件显示蓝色边框
- ruby-on-rails - Rails 6 ActiveRecord在where子句中求和列
- node.js - 不能将“未定义”用作 Firestore 值
- r - 不同视野的滚动原点交叉验证?
- react-native - 反应原生模态底部的边距
- java - HBase - 删除具有时间戳范围的行列而不扫描
- python - 有没有办法使用 Python 在基于 XSD 模式的 XML DOM 中添加元素?
- php - 当我尝试获取除最后插入的行之外的所有数据时,立即在 pgsql 中的表上插入数据后