1

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

想法 #1outline ：当鼠标悬停在 <tr> 上时添加 CSS 。适用于 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：在<tr>下方放置一个比<tr>宽/高的<div>，并将z-index<div>堆叠在<tr>下方，但在相邻<tr>之上。这更有趣，因为我可能会做圆角、不透明度等。这看起来很有希望，但是当首先在 Firefox 中实现时，很多想法也是如此。在阅读z-index并在几个不同的浏览器中玩弄代码之后，我感到非常沮丧。我在这里尝试的堆叠/排序可能太复杂而无法在不同的浏览器中工作。

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

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

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

4

3 回答 3

1

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

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

请参阅以下代码： http ://davidmarble.com/code/tr-hover-highlight.html

于 2009-12-25T00:38:55.900 回答
0

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 中仍然失败。

编辑

好的，再试一次...

如果您给 TR “display:block”，Webkit 会尊重 TR OUTLINE ，因此，以下工作：

<!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>
于 2009-12-24T10:03:06.457 回答
0

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

您所做的是删除所有 td 的底部边框bottom-border: 0。除了最后一行之外，其他单元格的顶部边框将使所有内容保持正常状态。最后一行我们用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; }
于 2011-11-16T02:47:02.210 回答