2

我有一个带有悬停效果的按钮（颜色变化）。

button {
    width: 180px;
    height: 80px;
    background-color: #A0522D;  
}

button:hover {
    background-color: #CD853F;
}

Then, from js I want to change background-color, for example when the button chosen is correct one. 这就是我想出的：

buttons[i].style.backgroundColor = "#A0522D";

我也有动画的过渡属性：

button {
    transition: background 0.5s ease, color 0.2s ease;
}

似乎每当我第一次更改背景颜色时，它都会完全删除悬停动画。但是，当我更改字体颜色而不是背景颜色时，情况并非如此。

你知道如何让悬停动画和 js 动画同时改变 bgcolor 工作吗？或者可能是我制作按钮动画的方法不对？

4

3 回答 3

3

这与您的 CSS 规则的特殊性有关。在元素上设置的规则（例如通过设置style属性）将比您在 CSS 文件/样式块中声明的规则具有更高的特异性（除非您使用!important）。

更好的方法是使用类来设置背景属性并更改元素上的属性，而不是直接设置样式：

buttons[i].className = "myClass";

这个StackOverflow 答案很好地描述了如何在 javascript 中设置 CSS 类。您可以在本文中阅读有关 CSS 特异性的更多详细信息。

于 2013-08-06T15:01:02.613 回答
2

您可以使用 javascript 更改类。

$('#yourElem').click(function(){

    $(this).toggleClass('on')

})

然后用 css 管理你所有的过渡

#yourElem { background-color:red; transition: background-color 500ms ease; }

#yourElem.on { background-color:blue; }

这将在点击时转换两者。

然后，只要您不使用新过渡指定悬停元素，您就可以同时执行这两项操作。

#yourElem { color:black; background-color:red; transition: background-color 500ms ease,  color 500ms ease; }

#yourElem:hover { color:pink;  }

#yourElem.on {color:white; background-color:blue; }
于 2013-08-06T15:08:19.857 回答
0

您可以使用 jquery 更改可能有帮助的 css 吗？使用悬停和 jquery 颜色库https://github.com/jquery/jquery-color

$('node').animate({ backgroundColor: "#f6f6f6" }, 'fast');
于 2013-08-06T15:02:07.210 回答