0

我是 jQuery 的新手，但我一生都无法弄清楚我做错了什么。当我将鼠标悬停在“更改它”文本上时，我希望表格行的颜色发生变化。请帮忙！（是的，该文档指的是保存的 jQuery 库）

<html>
<head>
    <title>testestsets</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $('#changer').hover(function) {
            $('#row1').css({
                'background-color':'#000',
                'color':'#FFF'
            });
        };
    </script>
</head>

<body>
    <table border="1">
        <tr id="row1">
            <td>ONE</td><td>TWO</td><td>THREE</td><td>FOUR</td>
        </tr>
    </table>
    <br/><br/>
    <p id="changer">Change it</p>
</body>
</html>
4

6 回答 6

7

将您的 jQuery 代码包装在一个文档就绪调用中，如下所示：

$(document).ready(function () {
  $('#changer').hover(function() {
    $('#row1').css({
      'background-color': '#000',
        'color': '#FFF'
    });
  });
});

此外，您在带括号的函数调用中有错字。

jsFiddle 示例

于 2013-01-15T16:38:49.770 回答
1

您将.hover回调绑定到#changer之前#changer存在于 DOM 中。将 JavaScript 移至下方<p id="changer">或将其包装起来$(document).ready(function () {})

您还可以使用 CSS 伪类:hover来执行您想要执行的操作，它还将处理自动删除在悬停时添加的类。

于 2013-01-15T16:39:08.397 回答
1 
$(document).ready(function () {    
    $('#changer').hover(
        function() {
            $('#row1').css({
                'background-color':'#000',
                'color':'#FFF'
            });
        }, 
        function() {
            // what that do when they go out
        }
    );
});
于 2013-01-15T16:40:08.020 回答
1

您的 jQuery 中有一个错误。你有一个)在错误的地方，缺少()后功能和)关闭悬停功能。

此外，您还需要将其包装在 a$(function(){ });中，以便在将事件分配给 DOM 元素之前加载并准备好 DOM。

将其更改为：

$(function(){
    $('#changer').hover(function(){
        $('#row1').css({
            'background-color':'#000',
            'color':'#FFF'
        });
    });
});
于 2013-01-15T16:40:38.283 回答
0

你非常亲近。您缺少 document.ready 和括号。

$(document).ready(function(){
    $("#changer").hover(function(){
        $("tr").css({
            'background-color': '#000',
            'color': '#fff'
        });
    });
});
于 2013-01-15T16:40:09.750 回答
0

您可以使用简单的 css 来完成任务

#changer:hover { background-color: #000;color:fff; }

或者，如果您想使用 jquery：

    $(document).ready(function () {    
    $('#changer').hover(
        function() {
            $('#row1').css({
                'background-color':'#000',
                'color':'#FFF'
            });
        }, 
        function() {
           $('#row1').css({
                'background-color':'#FFF',
                'color':'#000'
            });
        }
    );
});
于 2013-01-15T16:41:28.190 回答