Question

我正在尝试从div创建一个简单的JQuery按钮，当滚动到/关闭时会改变背景颜色。

到目前为止我的代码看起来像这样：

<html>
    <head>
        <title>Div Test</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $("div").hover(function() {
                $(this).css({'background-color' : 'yellow'});
            });
        </script>
        <style type="text/css">
            #mainButton {
                color: #FFF;
                width: 100px;
                height: 50px;
                background-color: #333;
            }
        </style>
    </head>
    <body>
        <div id="mainButton">
            <p align="center">Button</p>
        </div>
    </body>
</html>

然而，我无法让它发挥作用。我的按钮最初显示正常，但滚动时没有黄色背景。： - |

Answer 1

Javascript应该是这个

$(document).ready(function(){
        $("div").hover(function() {
            $(this).css('background-color' , 'yellow');
        });
});

如果您希望按钮在退出按钮时返回＃333，您可以使用：

$(document).ready(function(){
    $("div").hover(function() {
            $(this).css('background-color' , 'yellow');

    }, function(){
        $(this).css('background-color' , '#333');
    });

编辑以包含动画

这应该为背景颜色设置动画

$(document).ready(function(){
    $("div").hover(function() {
            $(this).animate({backgroundColor: 'yellow'}, 1000);
    }, function(){
        $(this).animate({backgroundColor: '#333'}, 1000);
    });

1000是您希望动画拍摄的时间

Answer 2

您的代码周围似乎缺少standard jQuery "wait for page ready" function。

 $(document).ready(function(){
   // Your code here
 });

如果要修改多个键/值对，则只需要css函数中的{}。

Answer 3

悬停功能有两个参数：

        $("div").hover(function() {
            $(this).css({'background-color' : 'yellow'}); //mouse in
        }, function(){
           $(this).css({'background-color' : 'green'});}); //mouse out

here您可以找到更多详细信息。

Answer 4

首先，我会使用<button>标记而不是分区标记，其中包含段落元素。您实际尝试做的事情中<button>标记就足够了。

其次，您正在错误地使用jQuery .css函数。根据{{3}}，脚本应该是这样的：

jQuery(document).ready(function($) {
    $("#mainButton").hover(
        // On hover over
        function() {
            $(this).css('background-color', '#FF0 ');
        }, 

        // On hover out
        function() {
            $(this).css('background-color', '#333');
        }
    );
});

Answer 5

要添加到现有答案中，您的解决方案无法正常工作，因为该元素不在DOM中，甚至还将事件绑定到它。建议使用：

 $(document).ready(fn)

语法如here所述，以确保在绑定事件之前完全加载DOM。

Answer 6

但是，您不需要jQuery来执行此操作。您可以通过一些带有CSS的伪类选择器轻松实现这一点。

DIV#mainButton:hover
{
   background-color: #ffo;
}

DIV#mainButton
{
   background-color: #333;
}

Answer 7

您缺少$（文档）.ready（function（）{}）并且您使用的是css函数错误。

$(document).ready(function(){

     $("div").hover(function() {

                $(this).css('background-color','yellow');
            });
      });

Answer 8

一些语法错误和一个丢失的ready（）......

<script type="text/javascript">
    $(document).ready(function() {

        $("div").hover(function() {
            $(this).css('background-color', 'yellow');
        });
    });
</script>

JQuery - 动画按钮

8 个答案: