表上的僞元素？

我試圖將一個僞元素應用到<tr>，但事實證明它沒有按預期工作。我不確定我是否缺少任何東西，或者如果它根本不可能。表上的僞元素？

這裏有一個的jsfiddle例如：http://jsfiddle.net/jDwCq/

請注意，如果你改變的tr到display: block;顯示，僞元素會顯示出來，但它顯示爲一個塊，而不是一個表，這是我需要的。

是否有可能或我註定了？

2012-11-05 qwerty

究竟你想用這個做什麼？ – Graviton

只是想爲表格行做一個很酷的懸停效果。當你把這些行懸停時，我想讓高度展開。或者我希望它看起來至少（我不想添加填充或更改高度，因爲那樣兄弟姐妹會受到影響）。我將使用'：before'和'：after'來使它看起來像行的頂部和底部變得更大。 – qwerty

tr:hover td{ 
     background: pink or whatever; 
    } 
tr:hover td:after{ 
    background: yellow; 
}

我沒有看到僞元素的需要。

我會說，有一個元素，它不是一個單元格，直接在一行內，是要求痛苦。儘管如此，您可以在目標行的每個單元格中始終擁有一個僞元素。使用正確的CSS，將不會有明顯的差異。

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

來源

2012-11-05 14:53:58 daveyfaherty

我不確定你明白爲什麼我需要僞元素。 – qwerty

基於我對錶和css的經驗，任何你想做的事情都可以通過樣式化單元完成，而且通常更加一致。我已經給你的jsfiddle添加了一個更改，以表明我的意思。 – daveyfaherty

成功！我的意思是，我發現它看起來真的很糟糕，我可能不會使用它，但它的工作原理！這裏有一個想法我的小提琴：http://jsfiddle.net/LvGQD/我希望我可以在這些僞元素的一些css3轉換，使他們幻燈片到位，或者也許淡出。 – qwerty

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

這應該工作...

來源

2012-11-05 13:45:40 Akhil

唯一的區別是你使用之前而不是之後..它沒有任何區別。 – qwerty

只需設置display: inline-block;恐怖機器人，並給他們的寬度（〜33％每）......從pseudoelement刪除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-05 14:05:18

使用'display：table;'的好處是，它會根據內容自動設置列的寬度。當然，我可以對寬度進行硬編碼，但我更願意將它顯示爲表格。這是不可能的，對吧？ – qwerty

當然，但在你原來的小提琴中，你是否使用過'display：table'？ :) –

啊，我的意思是說'display：table-row;'，而且我相信這是錶行的默認值（這是有道理的）。 – qwerty

爲了使行出現更大的使用::before和/或::after僞元素，你不得不這些元素應用到td元素，但選擇基於對的:hover的td元素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 Fiddle demo。

然而，如果目標是「看起來很酷」，那麼我會建議調整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 Fiddle demo。使用這種方法

當然，可以使用上的過渡效果color，background-color，height，font-sizeborder（-width或-color），並調整時序（以及放鬆）。

要爲多個屬性設置動畫效果，使用關鍵字all（而不是單獨的屬性名稱）更容易。

鑑於我的30分，我具有限定，甚至承認麻煩歲以上，「酷」這些天;但我七歲的侄子向我保證，動畫padding看起來「沒問題」。也許你可能必須諮詢你自己的孩子親屬，以尋找替代方法的冷靜。

來源

2012-11-05 16:31:12

我特別說過，我不想使用高度或填充來擴大高度，因爲它會影響兄弟行。如果你將鼠標懸停在其中一行上，你會發現下面的那些跳下來，這不是很好。這個想法是在行的頂部使用'：before';只需給它與行相同的背景，並擴大'：before'的高度而不是實際的行。底部部分是相同的，但用'：after'代替。這樣，它看起來行正在擴大高度。 – qwerty

因此，清楚地說明你想要什麼。因爲我覺得我錯過了一些東西，你想讓這個行看起來像是在擴展而不實際展開？ –

實際的行本身不應該擴大，這將使兄弟姐妹像你的例子一樣跳來跳去。我想要的是使行擴大，但不佔用空間，只是溢出它的兄弟姐妹。得到它？ – qwerty

表上的僞元素？

回答

相關問題