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

发布于 2024-08-16 04:33:30 字数 1136 浏览 6 评论 0原文

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

想法#1：将鼠标悬停在上时添加 CSS outline。适用于 IE8 和 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)：

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

EDIT: Super awesome slightly kludgish solution below including opacity and rounded corners in all but IE. I'll have to do a blog writeup one of these days on all the little issues.

原文

I'm trying to build a table (filled with actual tabular data), and get an outline effect for a row on hover. I've tried a couple ideas, but cross-browser issues are holding me back. Would love to hear any ideas.

Idea #1: Add CSS outline when hovering over <tr>. Works in IE8 & FF3, but not IE7 or Chrome (Webkit, so probably Safari too). The actual implementation of the hover is omitted for brevity:

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

Idea #2: Position a <div> under the <tr> that is wider/taller than the <tr>, and use z-index to stack the <div> below the <tr>, but on top of adjacent <tr>s. This is much more interesting, because I can potentially do rounded corners, opacity, etc. This looked promising, but so do many ideas when implemented first in Firefox. After reading up on z-index and playing around with code in several different browsers, I'm totally frustrated. The stacking/ordering I'm trying here is maybe too complex to work in different browsers.

Example code using jquery-ui and Position (http://wiki.jqueryui.com/Position):

[non-working code link removed]

EDIT: Super awesome slightly kludgish solution below including opacity and rounded corners in all but IE. I'll have to do a blog writeup one of these days on all the little issues.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜声 2024-08-23 04:33:30

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>

2 sounds terribly complicated. How about this:

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

EDIT

Try this:

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

Whoops.. this still fails in webkit.

EDIT

OK, try again...

Webkit honours the TR OUTLINE if you give the TR "display:block", so, the following works:

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

回复收藏 0 原文

哆啦不做梦 2024-08-23 04:33:30

这是我在问自己的问题后提出的解决方案 - 悬停时显示表格行大纲

您要做的就是使用 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; }

This is the solution I came up with after asking my own question on SO - Outline table row on hover

What you do is remove the bottom border for all of the td's with bottom-border: 0. The top borders of the other cells will keep everything looking the way they should, except for the last row. The last row we fix with tr:last-child td { bottom-border: your border style }. Finally in your hover pseudoclass you set the bottom border.

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; }

回复收藏 0 原文

夜灵血窟げ 2024-08-23 04:33:30

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

我添加了一些不透明度和圆角（IE 中没有圆角）。