Question

我目前正在为朋友制作代码，但我遇到了褪色问题，我不确定如何继续完成它。我的主要问题是让图像在淡出后淡入淡出。一旦我的鼠标不再悬停在图像上，不透明度将恢复正常。然而，过渡是瞬间的，而不是褪色，这看起来不太好。

.top {
    width: 580px;
    height: 250px;
    background-image:
    url(http://i.imgur.com/RSelpFd.png);
}
div:hover {
    opacity: 0;
    filter: alpha(opacity=50);
    transition: all 1s ease;
}

我知道还有其他方法可以做到这一点，但我还是新编码所以我并不是很了解它们，所以我希望有一种方法可以让我完成的工作。提前感谢您的帮助。

Answer 1

不需要JQuery。这是一个非常简单的css实现。

希望这可以帮到你。

https://jsfiddle.net/pablodarde/ggn89rp9/

<强> HTML

<div class="top"></div>

<强> CSS

.top {
    width: 580px;
    height: 250px;
    opacity: 1;
    filter: alpha(opacity=1);
    transition: all 1s ease;
    background-image:
    url(http://i.imgur.com/RSelpFd.png);
}
div:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Answer 2

试试这个小提琴 https://jsfiddle.net/1c6s90wm/

不要将hover提供给div而是将其提供给其班级。否则它将适用于所有div标签

<div class="top"></div>


.top {
    width: 580px;
    height: 250px;
    background-image:
    url(http://i.imgur.com/RSelpFd.png);
   // opacity: 1;
    transition: all 1s ease;

}
.top:hover {
    opacity: 0;
    filter: alpha(opacity=50);
}

Answer 3

使用jquery可以提供帮助。

$(document).ready(function(){
    $(document).on('mouseover','div',function(){
        $(this).css('opacity',0);
        $(this).css('filter','alpha(opacity=50)');
        $(this).css('transition','all 1s ease');
    });
});

注意＆＃39; hover＆＃39;更改为“鼠标悬停＆＃39;在jquery。

在CSS消失后淡出

3 个答案: