Ideas for table row outline on hover? CSS outline fails on tr in Webkit

问题

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.

回答1:

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

回答2:

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>

回答3:

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

来源：https://stackoverflow.com/questions/1957543/ideas-for-table-row-outline-on-hover-css-outline-fails-on-tr-in-webkit

标签

javascript

css

html-table

z-index

outline