Question

在portfolio page我目前的图片上：

.collection-type-gallery #slideshow .slide img:hover {
     opacity: 1;
     -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
     transition: opacity 1s ease-in-out;
}

但它没有消失。它们只会淡入。我怎样才能让它正常工作？

Answer 1

从转换声明中删除:hover：

.collection-type-gallery #slideshow .slide img { /* Set the transition on img without hover */
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out; 
}

.collection-type-gallery #slideshow .slide img:hover{opacity:1;} /* apply opacity change on hover */

问题是您只将转换附加到img:hover，因此当您将鼠标移开时，转换不再适用，请在img上设置转换，而不是{{1} }，然后只将:hover分配给opaicty:1

如何让我的图像淡出？

1 个答案: