Change only one of multiple backgrounds on hover

烂漫一生 提交于 2019-12-18 14:57:06

问题


The title basically says it all.


Here's an example:

#element {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #86a53c, #516520);
}

#element:hover {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #A0C153, #516520);
}

#element:active {
    background: url(image.png) no-repeat center center,
                linear-gradient(to top, #516520, #A0C153);
}

As you can see, only one of the background images changes - the other one stays the same in each and every state, but is still being declared four times!

So, is it possible to only change one of the backgrounds, but leave the other one as is - without having to re-declare it over and over again?

I know that the other CSS background properties (repeat, position etc.) can be set separately. This is just a quick example...


回答1:


Nope, no can do yet, sorry. This sounds like an addition that you can propose, though I'm not sure how it'd play out in terms of syntax and the cascade.




回答2:


This is now possible with CSS variables:

#element {
    --gradient: linear-gradient(to top, #86a53c, #516520);

    background: url(image.png) no-repeat center center,
                var(--gradient);
}

#element:hover {
    --gradient: linear-gradient(to top, #A0C153, #516520);
}

See it here in action: https://jsfiddle.net/22zu6oaq/



来源:https://stackoverflow.com/questions/9845224/change-only-one-of-multiple-backgrounds-on-hover

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!