jquery - 突出显示 html 表格中的行？

Question

我使用以下程序来创建突出显示鼠标悬停事件中的行，它工作正常，但我的问题是，如果鼠标悬停在特定行上，突出显示栏之间会出现空白吗？如何去除空格？

表创建:

<table border="0" id="TabDeclaration"  width="100%" cellpadding="5" cellspacing="3" border="2">
    <tr>
        <td>aaaa</td>
        <td>bbbb</td>
        <td>azaz</td>
    </tr>
    <tr>
        <td>cccc</td>
        <td>dddd</td>
    </tr>
    <tr>
        <td>eeee</td>
        <td>ffff</td>
    </tr>      
</table>

用于调用 css 的 jQuery:

$('#TabDeclaration tr').mouseover(function() {
    if($.trim($(this).text()) != '')
       $(this).addClass('hovered');
    }).mouseout(function() {
       $(this).removeClass('hovered');
});

CSS:

.hovered td {
   background: #ddd;
}

Answer 1

你为什么要使用 JavaScript？使用 css :hover 会容易得多选择器。

HTML:

<tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>azaz</td>
</tr>

<tr>
    <td>cccc</td>
    <td>dddd</td>
</tr>
 <tr>
    <td>eeee</td>
    <td>ffff</td>
</tr>      

CSS:

tr:hover {
  background: #ddd;
}

当鼠标悬停在表格行上时，这应该可以正常工作。 :hover选择器适用于任何 HTML 元素，而不仅仅是 <a>标签。