悬停时表格行轮廓的想法？ CSS 大纲在 Webkit 中的 tr 上失败答案

【问题标题】：Ideas for table row outline on hover? CSS outline fails on tr in Webkit悬停时表格行轮廓的想法？ CSS 大纲在 Webkit 中的 tr 上失败
【发布时间】：2010-12-29 18:37:57
【问题描述】：

我正在尝试构建一个表格（填充实际的表格数据），并在悬停时获得一行的轮廓效果。我尝试了几个想法，但跨浏览器问题阻碍了我。很想听听任何想法。

想法 #1：当鼠标悬停在

上时添加 CSS outline。适用于 IE8 和 FF3，但不适用于 IE7 或 Chrome（Webkit，也可能是 Safari）。为简洁起见，省略了悬停的实际实现：

<table style="margin:10px;width:800px">
    <tbody>
        <tr style="outline:red solid 3px">
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
    </tbody>
</table>

想法#2：在

下方放置一个比宽/高的

，并使用z-index将

堆叠在下方>，但在相邻的之上。这更有趣，因为我可能会做圆角、不透明度等。这看起来很有希望，但是当首先在 Firefox 中实现时，很多想法也是如此。在阅读了z-index 并在几个不同的浏览器中玩弄代码之后，我感到非常沮丧。我在这里尝试的堆叠/排序可能太复杂而无法在不同的浏览器中工作。

使用 jquery-ui 和 Position (http://wiki.jqueryui.com/Position) 的示例代码：

[非工作代码链接已删除]

编辑：下面超级棒的略显笨拙的解决方案，包括除 IE 之外的所有内容的不透明度和圆角。这些天我必须写一篇关于所有小问题的博客。

【问题讨论】：

标签： javascript css html-table z-index outline

【解决方案1】：

我使想法 #2 发挥了作用，我认为这非常漂亮。不得不使用几个技巧。首先，块元素必须放在td 元素中，以使z-index 在多个浏览器中工作。我使用span 元素和display:block 来填充整个td，这意味着必须将一些td css 属性放在那些span 元素中，并进一步嵌套但尚未添加span 元素（边框尤其是填充）。

我添加了一些不透明度和圆角（在 IE 中没有圆角）。如果您有改进建议，请随时发表评论。

查看代码： http://davidmarble.com/code/tr-hover-highlight.html

【讨论】：

不错的一个。 tr 没有边框/轮廓属性，所以你真的不能用它做任何事情。
嗯，看不到示例工作。在 Chrome 18、IE9 和 Firefox 12 上测试。也许是因为我来自未来？？
链接已失效。有机会获得新链接吗？

【解决方案2】：

2 听起来非常复杂。这个怎么样：

tr:hover td{ outline: red solid 3px}

编辑

试试这个：

<script type="text/javascript"> 
 $(document).ready(function(){ 
 $("tr").hover( 
 function(){ 
  $(this).css({"outline":"red solid 3px"}); 
 }, 
 function(){ 
  $(this).css({"outline":"red solid 0px"}); 
 }   
 ); 
 }); 
</script>

哎呀.. 这在 webkit 中仍然失败。

编辑

好的，再试一次...

Webkit 尊重 TR OUTLINE 如果你给 TR “display:block”，所以，下面的作品：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table {

}
tr {
    outline-color: #f00;
    outline-style: solid;
    outline-width: 0px;
    display: block
}
.thick {
    outline-width:3px;
}
</style>
<script type="text/javascript">
     $(document).ready(function(){
       $("td").hover(
       function(){
         $(this).parent().addClass("thick");
       },
       function(){
         $(this).parent().removeClass("thick");
       }  
       );
     });
    </script>
</head>
<body>
<table style="margin:10px;width:800px">
    <tbody>
        <tr>
            <td>Test 1</td>
            <td>Test 2</td>
        </tr>
        <tr>
            <td>Test 3</td>
            <td>Test 4</td>
        </tr>
    </tbody>
</table>
</body>
</html>

【讨论】：

但是，我意识到，这在 IE7 中也失败了。 :(
2 是所有乐趣所在！哈哈...我真的希望轮廓在行外——行内没有垂直线。轮廓太糟糕了，不允许您像边框一样定义每一边。使用边框的解决方案将更改我想远离的悬停框模型。
不错的尝试，但是 display:block 将表格行的呈现更改为本质上是一个块（如 div），因此它的类似行的属性消失了。如果我们走这条路，我们不妨使用非表格元素和 css 构建一个表格。我没有排除这一点，但数据绝对是我想保留在实际 html 表中的那种。

【解决方案3】：

这是我在 SO - Outline table row on hover 上提出自己的问题后提出的解决方案

您所做的是删除所有带有bottom-border: 0 的td 的底部边框。除了最后一行之外，其他单元格的顶部边框将保持所有内容看起来应有的样子。最后一行我们用tr:last-child td { bottom-border: your border style } 修复。最后在悬停伪类中设置底部边框。

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child  { border-right-color: red; }

【讨论】：