Question

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

创意＃1 ：将鼠标悬停在＆lt; tr＆gt;上时添加CSS outline。适用于IE8＆amp; 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 ：定位＆lt; div＆gt;在＆lt; tr＆gt;下比＆lt; tr＆gt;更宽/更高，并使用z-index来堆叠＆lt; div＆gt;在＆lt; tr＆gt;之下，但在相邻的＆lt; tr＆gt;之上。这更有趣，因为我可以做圆角，不透明等。这看起来很有希望，但是在Firefox中首先实现时也有很多想法。在阅读了z-index并在几个不同的浏览器中玩代码之后，我完全感到沮丧。我在这里尝试的堆叠/排序可能太复杂，无法在不同的浏览器中使用。

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

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

<小时/> 编辑：下面超级棒的轻微kludgish解决方案，包括IE中的不透明度和圆角。我将不得不在所有小问题上做一篇博客写作。

Answer 1

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

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

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

Answer 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>

Answer 3

这是我在问自己的问题后提出的解决方案 - 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; }

悬停表格行轮廓的想法？ CSS大纲在Webkit中失败了

3 个答案: