Question

当用户查看div时，我需要更改div的颜色。

我正在尝试的这个脚本不起作用。知道怎么解决吗？

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $("#arrow-l").hover(
    function() {
        $(this).stop().animate({"background-color": "#999999"}, "slow");
    },
    function() {
        $(this).stop().animate({"background-color": "#BFBFBF"}, "slow");
    });
    </script>
    </head>
...
    <body>
     <div id="arrow-l">prev.</div>

Answer 1

使用jQuery动画，背景颜色动画不起作用。您必须使用jQuery UI或使用jquery颜色动画插件。

jQuery animate backgroundColor

http://www.bitstorm.org/jquery/color-animation/
http://docs.jquery.com/UI/Effects/ColorAnimations

Answer 2

来自jQuery API doc：

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

也许这有帮助。使用opacy e。 G。对我来说很好。

Answer 3

您只想更改背景颜色吗？

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(function() {
   $('#arrowl').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#E0EAF1');
   });
});

    </script>
    </head>
...
    <body>
     <div id="arrowl">prev.</div>

Answer 4

请参阅 LIVE DEMO AT JSFIDDLE

$("#arrow-l").hover(
    function() {
        $(this).css({'background-color': '#999999'});
    },
    function() {
        $(this).css({'background-color': '#BFBFBF'});
    }
);


 <div id="arrow-l">prev.</div>

鼠标悬停时div的动画颜色

4 个答案: