jQuery用css改变颜色：悬停(jQuery changing a color with css :hover)

jQuery用css改变颜色：悬停(jQuery changing a color with css :hover)

我有以下CSS

#button:hover .inner { background-color: #9c0000; -webkit-animation: circle 1s; -webkit-animation-fill-mode: forwards; -moz-animation: circle 1s; -moz-animation-fill-mode: forwards; animation: circle 1s; animation-fill-mode: forwards; }

这个想法就是那个.inner会在父div里面成长来填补它。 这部分$('#button:hover .inner').css('background-color',colorChoice);但我想允许人们定义background-color ，当我尝试$('#button:hover .inner').css('background-color',colorChoice); 这根本不会改变它。

所以我想知道是否可以使用jQuery从上面的css中更改background-color ，如果我能够提供变量，例如var colorChoice = '#ff0';

我已经提供了我的jsFiddle来向您展示我希望它如何工作

I have the following CSS

#button:hover .inner { background-color: #9c0000; -webkit-animation: circle 1s; -webkit-animation-fill-mode: forwards; -moz-animation: circle 1s; -moz-animation-fill-mode: forwards; animation: circle 1s; animation-fill-mode: forwards; }

The idea is that that .inner will grow inside the parent div to fill it up. This part works but I would like to allow people to define a background-color and when I try $('#button:hover .inner').css('background-color',colorChoice); this doesn't change it at all.

So I was wondering is it actually possible to change the background-color from the css above using jQuery if I was able to supply a variable such as var colorChoice = '#ff0';

I have supplied my jsFiddle to show you how I want it to work

最满意答案

应该可以使用jQuery，但我认为你需要使用http://api.jquery.com/hover/而不是你现在拥有的$（'＃button：hover .inner'）选择器。

$('#button').hover(function(){ $(this).find('.inner').css('background-color',colorChoice); });