3

疑似要素を a に適用しようとしています<tr>が、期待どおりに機能していないことがわかりました。何かが欠けているのか、それとも単に不可能なのかはわかりません。

jsfiddle の例を次に示します: http://jsfiddle.net/jDwCq/

trの表示を に変更するdisplay: block;と、疑似要素が表示されますが、必要なテーブルではなくブロックとして表示されることに注意してください。

それは可能ですか、それとも運命ですか？

4

4 に答える 4

1 
table tr:before{
position: relative; /* Needed for pseudo elem */
display: block; /*Uncomment me and see what happens*/
}

これはうまくいくはずです...

于 2012-11-05T13:45:40.717 に答える
0

TDに設定display: inline-block;し、幅（それぞれposition: absolute〜33％）を指定して、疑似要素から削除します。

それだけです：http：//jsfiddle.net/jDwCq/6/

   table tr {
        /*position: relative; /* (REALLY NOT) Needed for pseudo elem */
        display: block; /*Uncomment me and see what happens*/
    }

    td {
        width: 32.9%; /* ADD THIS */
        display: inline-block; /* AND THIS */
    }

    table tr:after {
        /*position: absolute; REMOVE THIS TOO */
        top: 0px;
        left: 0px;
        display: block;
        content: '';
        text-indent: -99999px;
        background: red;
        height: 2px;
        /*width: 100%; NOT NEEDED */
    }
于 2012-11-05T14:05:18.057 に答える
0

::beforeおよび/または::after疑似要素を使用して行を大きく表示するには、これらの要素を要素に適用する必要がありますが、に基づいて要素をtd選択する必要があります。td:hovertr

td::before,
td::after {
    /* defines the default states/sizes */
    height: 0;
    display: block;
    content: '';
}

tr:hover td::before,
tr:hover td::after {
    /* adjusts attributes based on the parent tr's :hover event */
    height: 1em;
}​

JS フィドルのデモ。

ただし、目的が「クールに見える」ことである場合は、「表示される」だけの疑似要素を使用するのではなく、要素自体のスタイルを調整することをお勧めします(アニメーション化できるため)。td

td {
    padding: 0;
    -moz-transition: padding 1s linear;
    -ms-transition: padding 1s linear;
    -o-transition: padding 1s linear;
    -webkit-transition: padding 1s linear;
    transition: padding 1s linear;
}

tr:hover td {
    padding: 1em 0;
    -moz-transition: padding 1s linear;
    -ms-transition: padding 1s linear;
    -o-transition: padding 1s linear;
    -webkit-transition: padding 1s linear;
    transition: padding 1s linear;
}

JS フィドルのデモ。

もちろん、このアプローチを使用すると、 、 、 、 ( または ) にトランジション効果を使用しcolorたりbackground-color、heightタイミングfont-size borderを-width調整したり-color(イージングも同様) したりできます。

複数のプロパティをアニメーション化するには、all(個々のプロパティ名ではなく) キーワードを使用する方が簡単です。

  1. 私は 30 歳を超えているため、最近では「クール」を定義したり、認識したりするのに苦労しています。しかし、私の 7 歳の甥は、paddingルックスをアニメートしても「大丈夫」だと保証してくれます。おそらく、代替アプローチのクールさについて、自分の子供の親戚に相談する必要があるかもしれません.
于 2012-11-05T16:31:12.253 に答える
0 
    tr:hover td{
      background: pink or whatever;
    }
tr:hover td:after{
  background: yellow;
}

疑似要素の必要性がわかりません。

セルではない要素を行の中に直接持つことは苦痛を求めていると言えます。ただし、ターゲット行のすべてのセル内に疑似要素を常に含めることができます。適切な CSS を使用すると、目に見える違いはありません。

例: http://jsfiddle.net/jDwCq/7/

于 2012-11-05T14:53:58.760 に答える