转换背景图像/ css在悬停时更改？ [英] transition background-image/css change on hover?

问题描述

我在另一个div中有一个拇指指甲，当缩略图悬停时我想让父div渐变/过渡到缩略图的背景，然后在悬停后淡出回原始图像。

I have a thumb nail inside another div, when the thumbnail is hovered I want the parent div to fade/transition to the background of the thumbnail, then fade back to the original image after hover.

到目前为止，我已将此背景更改为缩略图的背景，但没有转换。

I have this so far which changes the parent background to that of the thumbnail and back but with no transition.

$(document).ready(function() {

    var originalBG;
    var hoverBG;
    $(".alt-img").hover(
        function () {
            originalBG = $(this).parent().css('backgroundImage');
            hoverBG = $(this).css('backgroundImage');
            $(this).parent().css('backgroundImage',hoverBG);
        }, 
        function () {
            $(this).parent().css('backgroundImage',originalBG);
        }
    );

});

推荐答案

没有'内置'解决方案可用于淡入淡出进/出一个backgroundImage，但你可以玩链接 animate（）

There is no 'build-in' solution for fading in/out a backgroundImage, but you may play around with chaining animate()

.animate({opacity: 0.5}, 1000)

$ b例如
$ b

。或者使用.css（）以及设置新的不透明度级别。

for instance. Or use .css() aswell to just set a new opacity level.

这篇关于转换背景图像/ css在悬停时更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！