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

只需设置display: inline-block;为 TD，并给它们一个宽度（每个约 33%）......并position: absolute从伪元素中删除。

就是这样：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 
    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 回答
0

::before要使用和/或伪元素使行看起来更大，::after您必须将这些元素应用于td元素，但td根据 的:hover选择元素tr：

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 小提琴演示。

但是，如果目标是“看起来很酷1 ”，那么我建议调整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 多岁了，这些天我很难定义甚至识别“酷”；但我七岁的侄子向我保证，动画padding看起来“还可以”。也许，你可能不得不咨询你自己的孩子亲戚，以了解替代方法的酷炫之处。
于 2012-11-05T16:31:12.253 回答