想法的表行大纲悬停？ CSS概要在Webkit中失败 [英] Ideas for table row outline on hover? CSS outline fails on tr in Webkit

问题描述

我正在尝试建立一个表格（填充实际的表格数据），并获得一个悬浮的行的轮廓效果。我试过一对夫妇的想法，但跨浏览器的问题阻止我回来。

：当添加CSS outline 悬停在< tr>上。工程在IE8& FF3，但不是IE7或Chrome（Webkit，所以可能Safari）。为了简洁，省略了悬停的实际实现：

 < table style =margin：10px; width：800px> ; 
< tbody> 
< tr style =contour：red solid 3px> 
< td>测试1< / td> 
< td>测试2< / td> 
< / tr> 
< / tbody> 
< / table> 
  

想法2 ：定位< div&在< tr>比< tr>宽/高，并使用 z-index 来堆叠< div>低于< tr> ;,但在相邻的tr的顶部。这更有趣，因为我可以做圆角，不透明度等。这看起来很有前途，但是许多想法，当在Firefox首先实现。在阅读了 z-index 并在几个不同的浏览器中玩代码后，我完全感到沮丧。

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

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

---

EDIT ：超级真棒轻微kludgish解决方案包括不透明度和圆角在所有除了IE。

解决方案

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

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

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

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.

解决方案

I made idea #2 work, which I think is pretty nifty. Several tricks had to be used. First, block elements had to be put inside td elements in order to get z-index working in several browsers. I used span elements with display:block to fill the entire td, which means some td css properties will have to be put inside those span elements and further nested but not yet added span elements (borders and padding in particular).

I added some opacity and rounded corners (no rounded corners in IE). Feel free to comment if you have suggestions for improvements.

See the code working at: http://davidmarble.com/code/tr-hover-highlight.html

这篇关于想法的表行大纲悬停？ CSS概要在Webkit中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！