淡化动态背景图片？

Question

我有一个带有动态设置背景图像的几个div的AngularJS前端。我设置了这样的图像：

<div ng-style="{'background-image' : 'url(path/to/image/' + imageFile + ')'}">

我想在相应的鼠标进入/离开事件中将此图像淡入和淡化为中性白色背景颜色。

我知道我可以使用CSS3过渡来做到这一点。但我只知道如何使用在相应的CSS3类中静态定义的背景图像来完成此操作。如何使用动态背景图像执行此操作？

Answer 1

由于background-image已经设置为“正常”状态，并且你不会搞砸了，也许你可以使用hover尝试反向:not效果伪。

设置转换为div，并创建一个:not(:hover)选择器，强制background为白色，如果没有悬停...所以当你将它悬停时，它会淡入你的背景

div#myDiv {
    transition: 1s;
}

div#myDiv:not(:hover) {
    background: white !important;
}

只是一个想法......希望它有所帮助。