0

尝试使用 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>
4

4 回答 4

4

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

试试这个 CSS：

#row2td1:hover {color:red}
于 2013-07-12T21:08:19.583 回答
0

正如我在你的问题中所说的那样，你说你想改变TD的颜色或背景颜色，所以我会给你另一个从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}

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

于 2013-07-12T21:37:11.740 回答
0

您的代码不会等到 DOM 准备好，试试这个：

$(function(){
    $('#row1td1').hover(
        function() {
            $('#row2td1').css('color', 'red');
        }, 
        function() {
            $('#row2td1').css('color', '');
        }
    );
});
于 2013-07-12T21:07:55.933 回答
0

正如另外两个所说，您需要确保您是按 ID 而不是按类进行标记，并确保在执行任何 jQuery 之前文档已准备就绪（我个人认为这是最适合这种情况的方法）。

$(document).ready(function(){
    $(#row1td1).hover(function() {
        $(#row2td1).css('color', 'red');
    }, function() {
        $(#row2td1).css('color', '');
    });
});
于 2013-07-12T21:10:57.610 回答