Question

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

Answer 1

将jQuery代码包装在文档就绪调用中：

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

另外，你的括号函数调用中有一个拼写错误。

<强> jsFiddle example

Answer 2

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

上

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

Answer 3

$(document).ready(function () {    
    $('#changer').hover(
        function() {
            $('#row1').css({
                'background-color':'#000',
                'color':'#FFF'
            });
        }, 
        function() {
            // what that do when they go out
        }
    );
});

Answer 4

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

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

将其更改为：

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

Answer 5

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

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

jquery在悬停时更改类

5 个答案: