Question

陷入困扰我的问题。当用户将光标悬停在表格上时，我希望表格中一行的边框能够改变颜色。

这是我的jQuery：

$(document).on('hover', '.song', function()
{
    $(this).toggleClass('highlightRow');
});

这是我的HTML：

<table border="1" style="padding-top:0px; margin-top:0px;">
    <tr class="song"><td>test1</td></tr>
    <tr class="song"><td>test2</td></tr>
    <tr class="song"><td>test2</td></tr>
</table>

这是css类：

.highlightRow
{
   cursor: pointer;
   border: 2px solid red;
}

它在Chrome中完美运行。在Firefox中，光标变为指针，因此它会切换类，但边框永远不会改变颜色。我为它创建了一个jsFiddle（http://jsfiddle.net/5a9k2/7/），它工作正常。谁能告诉我为什么这不适用于Firefox？

编辑：答案 感谢下面的回答，我意识到TR不能有边界。话虽如此，我需要让它继续使用动态元素，并希望突出显示行中的每一个，而不仅仅是那个盘旋的，所以我的最终JS工作是：

$(document).on('hover', 'tr.song', function()
{
    $(this).children().toggleClass('highlightRow');
});

Answer 1

边框不能应用于“tr”，请改为使用“td”。

修改

用以下代码替换你的jQuery代码：

$("tr.song td").hover(function(){ $(this).addClass("highlightRow"); },function(){ $(this).removeClass("highlightRow"); });

Answer 2

你的边境css应该是：边框：2px纯红色;

来自：http://www.w3schools.com/css/css_border.asp 使用border属性时，值的顺序为：

border-width
border-style
border-color

如果缺少上述值之一（尽管需要边框样式），只要其余值按指定顺序排列就没有关系。

jQuery - toggleClass（）突出显示Chrome中的边框，但不突出显示Firefox

2 个答案: