Question

尝试使用JQuery。在鼠标悬停事件中，我想改变TD的背景颜色。这是我到目前为止所尝试的。但根本不工作。

<html>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('.row1td1').hover(function() {
    $('.row2td1').css('color', 'red');
}, function() {
    $('.row2td1').css('color', '');
});
</script>
<head>
        <!-- Bring to you by http://www.CSSTableGenerator.com -->
        <link rel="stylesheet" href="table.css" type="text/css"/>   
</head>
    <body>
        <div class="CSS_Table_Example" style="width:600px;height:150px;">
            <table >
                <tr> 
                    <td id="row1td0">
                        Title 2
                    </td>
                    <td id="row1td1">
                        Title 2
                    </td>
                    <td>
                        Title 3
                    </td>
                </tr>
                <tr> 
                    <td id="row2td0">
                        Title 1
                    </td>
                    <td id="row2td1">
                        Title 2
                    </td>
                    <td>
                        Title 3
                    </td>
                </tr>
                </table>
        </div>
    </body>
</html>

Answer 1

您不应该使用jQuery，但问题是您使用id="row2td1"，然后尝试将其作为类访问。

试试这个CSS：

#row2td1:hover {color:red}

Answer 2

你的代码不会等到DOM准备就绪，试试这个：

$(function(){
    $('#row1td1').hover(
        function() {
            $('#row2td1').css('color', 'red');
        }, 
        function() {
            $('#row2td1').css('color', '');
        }
    );
});

Answer 3

正如其他两个人所说，你需要确保你是按ID而不是按类标记，以及在做任何jQuery之前确保文档准备就绪（我个人认为这对于这种情况是最好的））。

$(document).ready(function(){
    $(#row1td1).hover(function() {
        $(#row2td1).css('color', 'red');
    }, function() {
        $(#row2td1).css('color', '');
    });
});

Answer 4

正如我在你的问题中提到的，你说你要改变 TDs 的颜色或背景颜色，所以我会给你另一个源自 Kolink 的解决方案充分利用你。

<强> HTML

<table >
    <tr> 
        <td class="row" id="row1td0">
            Title 2
        </td>
        <td class="row" id="row1td1">
            Title 2
        </td>
        <td class="row">
            Title 3
        </td>
    </tr>
    <tr> 
        <td class="row" id="row2td0">
            Title 1
        </td>
        <td class="row" id="row2td1">
            Title 2
        </td>
        <td class="row">
            Title 3
        </td>
    </tr>
</table>

并将css添加到您的代码中

    .row:hover {color:red}

希望它能为你充分利用......

如何在桌面的td上鼠标悬停时更改颜色？

4 个答案: