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>のz-index下に<div>を配置し、<div>を<tr>の下、ただし隣接する<tr>の上にスタックするために使用します。丸みを帯びた角や不透明度などを実行できる可能性があるため、これははるかに興味深いものです。これは有望に見えましたが、Firefoxで最初に実装したときに多くのアイデアがあります。いくつかの異なるブラウザでコードを読んz-indexで遊んだ後、私は完全にイライラしています。私がここで試しているスタッキング/順序付けは、さまざまなブラウザーで機能するには複雑すぎる可能性があります。

jquery-uiとPosition（http://wiki.jqueryui.com/Position）を使用したコード例：

[機能しないコードリンクが削除されました]

編集：IEを除くすべての不透明度と丸みを帯びた角を含む、以下の非常に素晴らしいわずかにぎこちないソリューション。私は最近、すべての小さな問題についてブログを書く必要があります。

4

3 に答える 3

1

私はアイデア＃2を機能させました。これはかなり気の利いたものだと思います。いくつかのトリックを使用する必要がありました。まず、複数のブラウザーで動作tdするようにするには、ブロック要素を要素内に配置する必要がありました。つまり、一部のcssプロパティをこれらの要素内に配置z-indexしspan、さらにネストする必要がありますが、要素 (特に境界線とパディング)はまだ追加していません。display:blocktdtdspanspan

いくつかの不透明度と丸みを帯びた角を追加しました (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 で自分自身の質問をした後に思いついた解決策です -ホバー時にテーブル行をアウトライン化します

あなたがすることは、すべての 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 に答える