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

可以实现更复杂的效果

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用CSS transitions来平滑效果。有jQuery库来处理这个问题，但CSS是更好的方法。您需要check for feature support并仅对需要它的浏览器使用jQuery transitions。

编辑：@Lucas Bernardi，因为你坚持用jQuery代替原生CSS方法，you can use .animate()和jQuery.Color plugin。但是对于支持它的浏览器，你最好使用CSS转换。

来自.animate()文档：

除非如下所述，否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用jQuery.Color插件）。

jQuery.Color文档中的示例用法：

jQuery("#go").click(function () {
  jQuery("#block").animate({
    backgroundColor: "#abcdef"
  }, 1500);
});
jQuery("#sat").click(function () {
  jQuery("#block").animate({
    backgroundColor: jQuery.Color({
      saturation: 0
    })
  }, 1500);
});

Jquery：使用悬停来改变css属性

2 个答案: