0

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

这是我的 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');
});
4

2 回答 2

2

边框不能应用于“tr”，请尝试使用“td”。

编辑

将您的 jQuery 代码替换为：

$("tr.song td").hover(function(){
    $(this).addClass("highlightRow");
},function(){
    $(this).removeClass("highlightRow");        
});
于 2011-11-22T21:14:24.877 回答
0

您的边框 css 应该是：边框：2px 纯红色；

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

border-width
border-style
border-color

上面的值之一是否丢失无关紧要（尽管需要边框样式），只要其余的按指定的顺序排列即可。

于 2011-11-22T21:01:33.287 回答