Вопрос:
Я пытаюсь применить псевдоэлемент к <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; }
Однако, если цель состоит в том, чтобы “выглядеть круто 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; }
Конечно, используя этот подход, вы можете использовать эффекты перехода на color, background-color, height, font-size border (-width или -color) и настроить время (также как ослабление).
Для анимации нескольких свойств проще использовать ключевое слово all (а не отдельные имена свойств).
- Учитывая, что мне исполнилось тридцать лет, я испытываю трудности с определением или даже признанием “прохладного” в наши дни; но мой семилетний племянник уверяет меня, что ожидание padding выглядит “хорошо”. Возможно, вам, возможно, придется проконсультироваться со своими родными родственниками, чтобы охладить альтернативные подходы.