Question

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

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

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

然后，从js我想改变背景颜色，例如当选择的按钮是正确的时。这就是我想出的：

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

我也有动画的过渡属性：

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

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

你知道如何让hover动画和js动画同时改变bgcolor吗？或者可能是我的动画按钮方法不正确？

Answer 1

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

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

buttons[i].className = "myClass";

这个StackOverflow answer描述了如何在javascript中设置CSS类。您可以在this article中阅读有关CSS特异性的更多详细信息。

Answer 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; }

Answer 3

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

上使用

$('node').animate({ backgroundColor: "#f6f6f6" }, 'fast');

从js更改css属性会破坏css动画

3 个答案: