Jquery 元素悬停时的背景图像转换

我对CSS和JQuery有一个复杂的问题。 我将我身体的背景颜色设置为绿色，我想在用户将鼠标悬停在按钮上时将背景更改为图像。 我使用JQuery来更改背景图像，但我希望它能够平滑地更改背景（过渡）。 我使用了CSS转换，但在这种情况下它似乎不起作用。 有什么想法吗？ 谢谢

$（文档）.ready（函数（）{
$（“#图标联系人”）。悬停（函数（）{
$（“body”）.toggleClass（“body图标触点悬停”）；
});
}
);
$（文档）.ready（函数（）{
$（“#图标相册”）。悬停（函数（）{
$（“body”）.toggleClass（“body图标相册悬停”）；
});
});
正文{
背景色：#1bbc9b；
过渡：所有3s轻松；
}
.身体图标接触悬停{
背景图片：url（../img/contact bg.jpg）；
背景重复：无重复；
背景尺寸：封面；
}
.body图标相册悬停{
背景图像：url（../img/album bg.jpg）；
背景重复：无重复；
背景尺寸：封面；
}

联系我们
专辑
不幸的是，您无法转换背景图像，这里是

如果不想更改JS，最简单的方法是为内容和背景创建单独的容器，然后转换不透明度而不是背景图像：


$（文档）.ready（函数（）{
$（“#图标联系人”）。悬停（函数（）{
$（“.background”）.toggleClass（“身体图标接触悬停”）；
});
}
);
$（文档）.ready（函数（）{
$（“#图标相册”）。悬停（函数（）{
$（“.background”）.toggleClass（“身体图标相册悬停”）；
});
});
正文{
保证金：0；
}
.背景{
位置：绝对位置；
宽度：100%；
身高：100%；
不透明度：0；
过渡：所有的1容易；
}
.内容{
位置：相对位置；
}
.身体图标接触悬停{
不透明度：1；
背景图片：url(http://dummyimage.com/1000x1000/eee/fff&text=this+是+一个+图像）；
背景重复：无重复；
背景尺寸：封面；
}
.body图标相册悬停{
不透明度：1；
背景图片：url(http://dummyimage.com/1000x1000/ddd/fff&text=this+is+an+image-2）；
背景重复：无重复；
背景尺寸：封面；
}

联系我们
专辑
你也可以使用css，一个
div
可以添加为覆盖
100%
宽度和
高度


a{
显示：块；
颜色：红色；
字体大小：30px；
}
.覆盖{
不透明度：0；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
过渡：5s线性；
z指数：-1；
}
#图标联系人：悬停~。覆盖{
不透明度：1；
背景：url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-69737.jpg);
}
#图标相册：hover~.overlay{
不透明度：1；
背景：url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-79573.jpg);
}

联系我们
专辑