jQuery 悬停在一个 div 上

Question

我是 jQuery 的新手，我真的无法理解这个问题。

我正在尝试选择 <a href="contact"><div id="res">Reserveren</div></a> .

这是我的 jQuery 代码:

 $(document).ready(function() {

 $('#res').hover(
    function () {
    $(this).animate({backgroundColor: "#fff" });
    },
    function () {
    $(this).animate({backgroundColor: "#000" });
    }

  });

但是，没有任何效果。它根本没有改变任何东西……我做错了什么？

提前致谢， 巴特

Answer 1

jQuery 不会，不能，在不使用 a suitable plug-in 的情况下为 color 设置动画。 ，或 jQuery UI library .

但是，您可以使用类名来利用 CSS 转换:

$('#res').hover(
    function () {
        $(this).addClass('animating');
    },
    function () {
        $(this).removeClass('animating');
    });

使用以下 CSS:

#res { /* default styles */
    background-color: #000;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

#res.animating, /* hovered-class/animating styles */
.animating {
    background-color: #fff;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

JS Fiddle demo .