当前位置：文江博客话题详情

jQuery jquery-plugins

鼠标悬停时 div 的动画颜色

发布于 2025-01-07 14:47:30 字数 573 浏览 0 评论 0原文

当用户经过它时，我需要更改 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>

I need change the color of a div when the user go over it.

This script I'm trying does not work. Any idea how to fix it?

    <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>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（4）

勿挽旧人 2025-01-14 14:47:31

您只想更改背景颜色吗？

    <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>

Do you only want to change the background color?

    <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>

回复收藏 0 原文

纵山崖 2025-01-14 14:47:31

请参阅JSFIDDLE 现场演示

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


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

Refer to 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>

回复收藏 0 原文

总攻大人 2025-01-14 14:47:30

使用 jQuery animate 无法实现背景颜色动画。您必须使用 jQuery UI 或使用 jquery 彩色动画插件。

jQuery 动画背景颜色

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

回复收藏 0 原文

娇纵 2025-01-14 14:47:30

来自 jQuery API 文档：

所有动画属性都应动画为单个数值，除非下面另有说明；大多数非数字属性无法使用基本 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能，除非使用 jQuery.Color() 插件使用）。

也许这有帮助。
使用 opacy 例如对我来说效果很好。

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

26 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文