Jquery:使用悬停更改 css 属性

Question

我正在尝试为我的网站制作一个按钮，它具有不断变化的颜色悬停效果。它可以简单地以这种方式在 css 中完成:

.button{
    color: green;
}

.button:hover {
    background : green;
    color: black;
}

但是，我想使用 JQuery(因为我正在尝试学习它)对此进行很好的转换。这是我迄今为止尝试过的代码之一:

$(function() {
    $('.button').on('mouseover', function() {
        $(this).css({
            "background" : "green", 
            "color" : "black",
        })
    })
})

我已经尝试过许多其他方法，比如使用“悬停”功能而不是“on(mouseover)”，使用 addClass 方法等。但是在所有这些中，当我将鼠标悬停在按钮上时没有任何反应。有什么简单的方法可以做到这一点吗？

Answer 1

您可以在 css 中进行漂亮的过渡!下面是一个使用 transition 的简单实现。使用@keyframes

可以实现更复杂的效果

.button {
    display: inline-block;
    padding: 10px 40px;
    background-color: #0f82e0;
    color: #ffffff;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #27b258;
}

<div class="button">I&#39;m a button!</div>