悬停时图像移动 - Chrome 不透明度问题

Question

悬停时图像移动 - Chrome 不透明度问题

cssimagegoogle-chromehoveropacity

94

我的页面似乎有问题：

http://www.lonewulf.eu

当鼠标悬停在缩略图上时，图像会向右移动，这只会在Chrome浏览器上发生。

我的css：

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

- Tasos

在我的 22.0.1229.94 m 上无法移动。 - Danny

3

最佳实践是将Hover效果放在A标签上，而非图像本身。 - Diodeus - James MacFarlane

是的，.img是一个href类。我应该给它起一个不同的名字吗？也许现在它与<img src>冲突了？编辑：算了，我把名称从.img改为.thumb，但仍然遇到了这个问题。还有其他建议吗？ - Tasos

这可能是Fancybox正在做的事情。 - Diodeus - James MacFarlane

4

在我的情况下，只有在Z轴上使用翻译才起作用：https://dev59.com/KWcs5IYBdhLWcg3w437H#12820319 - Larry

显示剩余2条评论

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lenin Zapata · Answer 1

在这个问题中，解决方案alpipego为我提供了帮助。使用-webkit-backface-visibility: hidden;，可以使图像在悬停透明度转换时不移动。

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

- sidonaldson · Answer 2

我将Rick Giner的答案标记为正确后，发现它并没有解决问题。

在我的情况下，我有响应式宽度的图像包含在最大宽度的div中。一旦网站宽度超过了最大宽度，图像就会在悬停时移动（使用css transform）。

在我的情况下，解决方法很简单，只需将最大宽度修改为三的倍数，这里是三列，它完美地解决了问题。

- Just Browsing · Answer 3

遇到过同样的问题，我的解决方法是在img标签中先放置class再放置src。

- cssninja · Answer 4

我注意到你的CSS中包含了不透明度。我曾经在Chrome上遇到过完全相同的问题（图像在悬停时移动）...我所做的就是禁用不透明度，问题就解决了，再也没有图像移动了。

.yourclass:hover {
  /* opacity: 0.6; */
}