文章/答案/技术大牛

发布

社区首页 >问答首页 >google chrome中悬停的图像/div闪烁

问google chrome中悬停的图像/div闪烁
EN

Stack Overflow用户

提问于 2013-12-28 16:28:13

回答 2查看 4.2K关注 0票数 2

我是动画的图像，所以当悬停在不透明度上升到1，这部分是非常好的工作，然而，当图像在铬徘徊时，第二列闪烁一点点向侧面。我也在IE和Firefox上测试过，没有问题。

在这里自己检查一下：http://abmenzel.com/work/

HTML：

<body class="blue4">
    <div class="content">
        <div class="work-item blue4">
            <a href="http://www.youtube.com/watch?v=SbjEgqPmtAs" title="Template#2 Intro"><img src="img/Template-2-Intro.png"/></a>
        </div>
    </div>
</body>

CSS：

.work-item{
    width:25%;
    opacity:0.8;
    overflow:hidden;
    display:block;
    float:left;
}

img{
    width:100%
}

.work-item:hover{
    opacity:1;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

我还使用脚本来设置等于动态宽度的高度，这可能与动态宽度有关，但我不确定。

剧本：

$(function() {
    var div = $('.work-item');
    var width = div.width();

    div.css('height', width-5);
});

javascript

html

css

google-chrome

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-12-28 17:47:50

首先，将您的转换属性放在普通元素中，而不是打开:悬停状态。然后，如果只需要在不透明度上进行转换，请使用：

opacity 0.2s ease-in-out 0s

这种闪烁在Webkit浏览器中是一个已知的错误，它发生在您在流体元素上动画不透明时(这里是25%)。这里有一个解决办法：

-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);

我知道这听起来像黑客，但有效.

票数 6

Stack Overflow用户

发布于 2014-12-19 14:54:20

我使用translate3D而不是translateX

img {-webkit-transform: translate3D(0,0,0);}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20816739

复制

相似问题

问google chrome中悬停的图像/div闪烁
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问google chrome中悬停的图像/div闪烁EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问google chrome中悬停的图像/div闪烁
EN