Question

网站正在进行中： http://www.lazydayzzz.com/

大家好，我在这里遇到悬停过渡的一些问题，这似乎只发生在Chrome中。
当用户将鼠标悬停在图块上时，div的背景颜色会发生变化，图像的不透明度会下降，图像上会出现一个图标。

在chrome中，它似乎将图像重新定位在图块中以获得过渡的长度。在Firefox中，它工作正常，我用它工作在chrome中，直到我开始以某种方式设置页脚样式。

问题似乎也只是较小的瓷砖，与大的瓷砖一样，过渡工作正常。有没有人有任何可能解决的想法？
虽然此处提供了页面源，但我可以根据需要添加片段该网站正在与一些新闻学生合作完成作业
这是图像透明度下降的图块图像的代码。

    .griditemsmall a:hover img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -o-transition: 0.5;
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -webkit-opacity: 0.5;
    display:inline-block;
    padding-bottom: 0;
}

  .griditemtall a:hover img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -o-transition: 0.5;
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -webkit-opacity: 0.5;
    display:inline-block;
    padding-bottom: 0;

}

这是在悬停时调用图标

.griditemtall a:hover .entypo-mute {
    display:block;
    margin-top: -180px;

}

Answer 1

你可以发贴你的代码吗？

去了我，过渡它运作良好，这将成为问题

.griditemsmall {
display: inline-block;
background-color: #171818;
margin-bottom: 20px;
height: 260px;
-webkit-transition: all 300ms ease-in-out;/* Add this */
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

或类似

.gridbottomentertainment,.griditemsmall {
    -webkit-transition: all 300ms ease-in-out;/* Add this */
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    }

在Chrome中悬停不透明度问题

1 个答案: