Question

我正在制作网站上某些信息的表格报告。这个表相当宽，所以我想使用jQuery在悬停时为每一行添加一个4px边框。这是我的剧本：

$(function() {
    $('tr').hover(function() {
        $(this).contents('td').css({'border-top':'4px solid #934739', 'border-bottom':'4px solid #934739'});
    },
    function() {
        $(this).contents('td').css({'border-top':'1px solid #000','border-bottom':'1px solid #000'});
    });
});

它在Firefox中完全正常工作。但是，在Chrome中它可以在前几行中正常工作，但随后它会在之前悬停的行上“留下”一些边框颜色。

我在使用Chrome 15.0.874.106的Mac上。这里以jsFiddle为例：http://jsfiddle.net/D6eKE/1/

我有什么办法可以让Chrome在Chrome中更好用吗？谢谢你的帮助！

Answer 1

看起来你非常接近，所以尝试添加ID选择器：

$(function(){
    $("#tableid tr").hover(
        function(){
            $(this).addClass("highlight");
        },
        function(){
            $(this).removeClass("highlight");
        }
    );
});

您还可以使用columnHover插件：

$(document).ready(function(){
    $("#tableid").columnHover({ hoverClass: "highlight" });
});

最后，您还可以使用一些简单的CSS来完成此任务：

#tableid tr:hover {
  background-color: #f8f8f8;
}

Answer 2

我相信你必须使用.each（）通过jQuery选择器$（'tr'）将函数应用于所有返回的项目。这将迭代jQuery返回的对象数组，并将所需的操作应用于它们中的每一个，在这种情况下为tr标记。像

这样的东西

$(function(){
    $('tr').hover(function() {
        $(this).css({'border-top':'4px solid #934739', 'border-bottom':'4px solid #934739'});
        },
        function() {
            $(this).css({'border-top':'1px solid #000', 'border-bottom':'1px solid #000'});
        });
});

jQuery-突出显示Chrome中的表格行

2 个答案: