Question

我有以下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中增长以填补它。这部分有效，但我想允许人们定义background-color，当我尝试$('#button:hover .inner').css('background-color',colorChoice);时，这根本不会改变它。

所以我想知道如果我能够提供background-color

之类的变量，实际上可以使用jQuery从上面的css中更改var colorChoice = '#ff0';

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

Answer 1

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

Answer 2

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

jQuery用css改变颜色：悬停

2 个答案: