Псевдоэлементы на таблицах?

Вопрос:Я пытаюсь применить псевдоэлемент к , но оказывается, что он работает не так, как ожидалось. Я не уверен, что у меня что-то отсутствует или просто просто невозможно. Вот пример jsfiddle: http://jsfiddle.net/jDwCq/ Обратите внимание, что если вы измените отображение tr на display: block;, псевдоэлемент будет отображаться, но он отображается как блок, а не таблица, которая мне

Вопрос:

Я пытаюсь применить псевдоэлемент к <tr>, но оказывается, что он работает не так, как ожидалось. Я не уверен, что у меня что-то отсутствует или просто просто невозможно.

Вот пример jsfiddle: http://jsfiddle.net/jDwCq/

Обратите внимание, что если вы измените отображение tr на display: block;, псевдоэлемент будет отображаться, но он отображается как блок, а не таблица, которая мне нужна.

Возможно ли, или я обречен?

Лучший ответ: tr:hover td{ background: pink or whatever; } tr:hover td:after{ background: yellow; }

Я не вижу необходимости в псевдоэлементах.

Я скажу, что наличие элемента, который не является ячейкой, прямо внутри строки, требует боли.
Тем не менее, вы всегда можете иметь псевдоэлемент внутри каждой ячейки целевой строки. С правильным css не будет заметной разницы.

Пример: http://jsfiddle.net/jDwCq/7/

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

это должно работать…

Ответ №2

Просто установите display: inline-block; в TDs и дайте им ширину (~ 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 */ } Ответ №3

Чтобы увеличить размер строк, используя псевдо-элементы ::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 :hover event */ height: 1em; }​

JS Fiddle demo.

Однако, если цель состоит в том, чтобы “выглядеть круто 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 Fiddle demo.

Конечно, используя этот подход, вы можете использовать эффекты перехода на color, background-color, height, font-size border (-width или -color) и настроить время (также как ослабление).

Для анимации нескольких свойств проще использовать ключевое слово all (а не отдельные имена свойств).

  • Учитывая, что мне исполнилось тридцать лет, я испытываю трудности с определением или даже признанием “прохладного” в наши дни; но мой семилетний племянник уверяет меня, что ожидание padding выглядит “хорошо”. Возможно, вам, возможно, придется проконсультироваться со своими родными родственниками, чтобы охладить альтернативные подходы.
Оцените статью
Добавить комментарий