web-dev-qa-db-ja.com

テーブル行ボックス-ホバーの影（Webkit）

これは可能ですか？

私のコードはFirefoxで動作します。 Webkitでホバー時に他のプロパティ（背景色など）を変更することもできますが、ボックスの影が有効になりません。

tr:hover {
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}
csswebkitcss-tables
16
Anthony C

ここで回答されているように： https://stackoverflow.com/a/11002077/110639trのスタイルを設定するのではなく、td-要素を疑似要素と組み合わせてスタイル設定する必要がありますクラス :first-childおよび:last-child。接頭辞tr:hoverはあなたのためにトリックを行います：

tr:hover td {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -moz-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}

挿入図付きのデモ1： http://jsfiddle.net/Kk6Th/

更新：
インセットなしのデモ2（クラシックドロップシャドウ）： http://jsfiddle.net/2nw4t/1/
インセットなしのデモ3（グロー効果）： http： //jsfiddle.net/2CSuM/

23
AvL

ボックスシャドウでtransformscale（1,1）プロパティを使用すると、問題が解決します。

tr:hover {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

フィドル： https://jsfiddle.net/ampicx/5p91xr48/

ありがとう！

3
Anurag Malhotra

私はこの問題に直面しており、いくつかの回避策を見つけました。

  1. すべてのtdに影を追加します。
  2. trにdisplay: blockを設定します。
  3. 適切なスタイルのtd:first-child:beforeを使用してください。
  4. すべてのtdに影を付け、不要な部分を覆います。

このjsFiddleで確認できます： https://jsfiddle.net/maskl/cxscmvpr/3/

1
Marek

最近、同様の問題を扱っているときにこの投稿に遭遇しました。 CSSのtr要素のdisplay: flex;プロパティとposition: relative;プロパティを使用して、マークアップがはるかに少ない（tdスタイリングが少なく疑似スタイリングが少ない）別のアプローチを見つけたと思います。

trをフレックスボックスとして設定

tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    align-items: center; /* Vertically aligns td's inside the tr */        
}

これにより、TRがflexboxとして設定され、DOM内での位置を壊すことなく、z-indexの影響を受けることができます。次に、z-index疑似要素のtr:hoverを調整してbackground-colorおよびbox-shadow効果を追加します。

セットアップ:hover効果

tr:hover {
    z-index: 1 /* or higher if necessary */
    -webkit-box-shadow: 0px 2px 4px #e06547;
    -moz-box-shadow: 0px 2px 4px #e06547;
    box-shadow: 0px 2px 4px #e06547;
    background-color: #d4d5d6;
}

Trのデフォルトのalign-itemsプロパティを使用しなくなったため、td flexbox display: table-rowを使用して、tr要素のサイズと位置を調整する必要がある場合があります。 。thralign-items: center;プロパティを使用してtd要素を垂直方向に中央揃えします（上記を参照）。次に、td幅を設定します。

td {
    width: 10em;
}

ここで作業中のフィドルを参照してください： https://jsfiddle.net/t68b9cwd/6/

このソリューションはかなり普遍的であり、最新のブラウザはプレフィックスなしでこれを処理しますが、回避策を実行する必要がある古いブラウザのインス​​タンスである可能性があります（ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox ）であり、GoogleがGmailの行をスタイル設定する方法と似ています。

1
Kenneth Petty

これは私に起こりました、そして私はそれにいくつかのマイナーな境界半径を置きました、そしてそれは働きます。

border-radius: 1px;

あなたが達成しようとしている見た目によっては、それはあなたが使うことができるハックかもしれません。

0
Kenny

AvLのソリューションは非常に優れています。ヒントをありがとうございます。私のようにあなたは全体としてbox-shadow (inset)が欲しいのですが tr、単なる側面ではなく、このコードはあなたを助けるはずです：

tr:hover td {
    -webkit-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 0 -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:first-child {
    -webkit-box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, 4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
tr:hover td:last-child {
    -webkit-box-shadow: -4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset, -4px -4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
0
Fanch