Подсветить строку и колонку таблицы при помощи CSS
Подсветить строку таблицы при помощи CSS достаточно легко: tr:hover
Трюк в использовании громадных псевдоэлементов для элемента td , при этом псевдоэлементы скрываются за пределами таблицы
Реализовывать подсветку будем при помощи псевдоэлементов, при этом у псевдоэлемента ширина должна быть равна ширине ячейки, а верхнее отрицательное поле должно быть равно половине значения от высоты (которая, в свою очередь, назначается с запасом, чтобы перекрыть любую по высоте таблицу) псевдоэлемента.
Отрицательный z-index располагает псевдоэлемент ниже контента. Отрицательный z-index любопытный трюк, но будьте осторожны, когда таблица вложена в другие элементы с фоном, иначе подсветка пойдет под ними.
Как заставить работать с сенсорными дисплеями
Псевдокласс :hover любопытно работает на touch-устройствах. Во-первых, элемент должен быть фокусируемым, что по умолчанию для ячеек таблиц не так. Вы, конечно, можете добавить обработчик события click на ячейку таблицы и реализовать все на JavaScript, но вот метод, позволяющий сохранить большую часть работы в CSS:
jQuery
Затем в CSS вам потребуется следующие стили:
В моем финальном примере, я немного поправил CSS с целью исключить срабатывание наведения на пустых ячейках, при наведении на заголовок в элементе thead срабатывает выделение только столбца, а при наведении на заголовок в tbody выделяется лишь строка.
Источник
:hover
Описание
CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link , :visited и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited , но после :active , как определено в LVHA-порядке: :link — :visited — :hover — :active .
Псевдокласс :hover может применяться к любому псевдоэлементу.
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
Примеры
Выпадающее меню
С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следующего:
применим к HTML структуре типа следующей:
Галерея полноразмерных изображений и превью
Вы можете использовать псевдокласс :hover , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение ‘:hover’ в этой спецификации. | Живой стандарт | |
Selectors Level 4 Определение ‘:hover’ в этой спецификации. | Рабочий черновик | Может применяться к любым псевдоэлементам. |
Selectors Level 3 Определение ‘:hover’ в этой спецификации. | Рекомендация | Без значительных изменений. |
CSS Level 2 (Revision 1) Определение ‘:hover’ в этой спецификации. | Рекомендация | Изначальное определение. |
Поддержка браузерами
BCD tables only load in the browser
Found a problem with this page?
- Edit on GitHub
- Source on GitHub
- Report a problem with this content on GitHub
- Want to fix the problem yourself? See our Contribution guide.
Last modified: Jul 23, 2021 , by MDN contributors
- Web Technologies
- Learn Web Development
- About MDN
- Feedback
- About
- MDN Web Docs Store
- Contact Us
- Firefox
Mozilla
© 2005- 2021 Mozilla and individual contributors. Content is available under these licenses.
Источник
Псевдоклассы и псевдоэлементы в CSS (hover, before, first-child и другие)
Приветствую Вас, уважаемые читатели блога. Сегодня продолжим тему изучения каскадных таблиц стилей. В одной из предыдущих статей мы рассматривали специальные селекторы в CSS, но рассмотрели только часть из них. И на очереди у нас остались селекторы псевдоклассов и псевдоэлементов.
Псевдоэлементы
Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.
Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:
Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.
Далее рассмотрим некоторые псевдоэлементы и их свойства.
:first-letter
Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу (увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал (увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).
Рассмотрим применение first-letter на примере создание выступающего инициала:
И результат примера:
Как видно на скриншоте, первая буква абзаца стала в два раза больше и изменила цвет на красный.
:first-line
Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента :first-line на абзац текста:
:after и :before
Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.
Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after» поставить «before», то текст вставиться в начале абзаца.
Псевдоклассы
Псевдоклассы позволяют привязать стиль к элементам веб страницы на основе их состояния и местоположения в дереве элементов. Примером такого состояния может служить гиперссылка, которая меняет свой цвет при наведении на нее курсора мыши.
При описании css правил псевдоклассы обычно используют в совокупности с основными селекторами:
Если псевдокласс указывается без селектора впереди (:hover), то он применяется ко всем элементам страницы.
Псевдоклассы условно делятся на три группы:
- определяющие состояние элементов;
- имеющие отношение к дереву элементов;
- указывающие язык текста.
Псевдоклассы, определяющие состояние элементов
Псевдоклассы этой группы определяют состояние элемента html страницы и применяют стиль только для определенного состояния. Обычно псевдоклассы состояний применяются для гиперссылок, но иногда их применяют и для других элементов веб страницы.
Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a <…>и a:link <…>в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.
Псевдокласс :visited определяет внешний вид посещенных ссылок, т.е. ссылок по которым пользователь уже щелкнул. По умолчанию такие ссылки меняют свой цвет на фиолетовый, но с помощью данного псевдокласса цвет и другие параметры можно поменять.
Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.
Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.
И последний псевдокласс :hоvеr применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.
Для примера посмотрим как будут выглядеть ссылки в разных состояниях:
Псевдоклассы структуры документа
С помощью этой группы псевдоклассов стили привязываются к элементам в зависимости от их положения в структуре документа.
Первыми рассмотрим псевдоклассы :first-child и :last-child, которые привязывают стиль к элементам селектора, которые являются соответственно первым и последним дочерним элементом своего родителя. Чтобы стало понятней рассмотрим эти псевдоклассы на примере маркированного списка:
В этом примере с помощью правила CSS « li:first-child» мы говорим браузеру, что стиль необходимо применить к элементу li, который идет первым в своем родительском элементе. А с помощью селектора « li:last-child» элемент должен быть последним. Таким образом, с помощью свойств css для настроек отображения шрифтов, мы указали, что первый элемент списка должен быть выделен жирным шрифтом, а у последнего элемента установили шрифт красного цвета.
Следующий псевдокласс : only-of-type, который применяется к дочернему элементу указанного типа, только если он единственный у своего родителя.
В примере псевдокласс : only-of-type применяется к элементу , в правилах стиля которого размер шрифта увеличивается в два раза. Размер шрифта увеличивается только у тех гиперссылок, которые у своих родителей (в данном случае это тег
) встречаются только один раз.
Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:
После имени данного псевдокласса в скобках может быть указано четыре возможных варианта:
- odd — стиль будет привязан ко всем нечетным элементам удовлетворяющих значению ;
- even — означает все четные элементы;
- число — обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
- выражение — задается в виде формулы an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2…
Например, как выделить все четные строки таблицы цветом? В этом случае идеально поможет псевдокласс :nth-child:
В коде примера запись tr:nth-child(2n) означает, что стиль необходимо привязать ко всем элементам tr, с помощью которых формируются строки таблицы (об этом мы говорили в статье как вставить таблицу на html-странице). Причем порядковый номер строк относительно родительского элемента table должен удовлетворять формуле 2n, в которую браузер вместо n подставляет целые числа 0, 1, 2… В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.
Псевдоклассы :not и *
Осталось рассмотреть еще два важных псевдокласса. Особый псевдокласс :not позволяет привязать стиль к любому элементу web страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:
Стиль будет привязан к элементам веб страницы, удовлетворяющим основному селектору и не удовлетворяющему селектору выбора. Например:
В результате этого css правила, текст всех заголовков h1 окрасятся в красный цвет, кроме того у которого атрибут id будет равен main.
И последний на сегодня псевдокласс * («звездочка»), который обозначает любой элемент html страницы. Он может потребоваться в случае, если необходимо установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. Синтаксис:
Например, чтобы установить размер текста для всех элементов документа можно использовать следующее правило css:
На этом все, до новых встреч на страницах блога!
Источник
Подсветка строк и столбцов HTML-таблицы
На одном форуме возник вопрос о подсветке (выделении цветом) в HTML-таблице ячейки, строки и столбца – при наведении мыши. Ну, как подсвечивать строку с ячейкой вроде бы понятно:
Но как выделить цветом текущую (наведённую) колонку? У элемента col CSS-фокус с col:hover для ячеек выбранного столбца не срабатывает (так как, строго говоря, ячейки не являются потомками col). Поэтому без какого-то минимума javascript тут не обойтись.
Первое решение – быстрое и неправильное
Быстренько кропаем следующее «красивое» решение: krest.html. Алгоритм такой:
- Всем элементам col таблицы назначаем атрибуты id, значение которых заканчивается на число – индекс, начиная с нуля.
- Таблице присваиваем атрибут onmouseover = [some function]
- В функции-обработчике (мы назвали её cBg – от «change background») мы получаем индекс текущей ячейки (над которой мышь) – cellIndex, добавляем к этому индексу спереди условные буквы (у нас – «col_») и получаем идентификатор соответствующей (текущей, если мы всё правильно сделали) колонки.
- Назаначаем найденной текущей колонке className = «green», предварительно описанный в правилах CSS.
- Ну, а при противоположном событии (onmouseout) удаляем className green у текущей колонки.
- Цвета фона текущей строки и ячейки попросту описываем в CSS псевдоклассами tr:hover, td:hover.
Красота! Возвращаемся на форум, который нас растревожил по этому поводу, и обнаруживаем в одном из сообщений ссылку на практически точно такой же говнокод: http://css-tricks.com/examples/RowColumnHighlighting/js/example-one.js. То есть сначала-то мы не знали, что это у нас получился говнокод, но глядя, как в зеркало, на позорную Жикверь-based-поделку, злобно выискали все соринки в глазу негодяя.
- Первое: не работает в Опере! Почему-то при динамическом назначении селектора класса элементу col в Опере цвет столбца не меняется (хотя в принципе в статическом CSS раскрашивать таблицу через col можно).
- Второе: подсветка строки и ячейки на CSS не работает в IE6 (и, видимо, в IE7) – так как там псевдокласс :hover действует только для ссылок (элементов a).
- И третье: конкуренты напомнили о неявных зависимостях: префикс «col_» у нас для ID колонок генерируется на сервере (получаем готовый HTML), и javascript на клиенте должен как-то догадываться об этом префиксе, чтобы с его помощью находить элементы col. У конкурентов здесь лучше: ID колонок генерируется прямо в javascript.
Простое решение: быстрое, работающее, но с зависимостями
Сначала делаем, чтобы всё просто работало (Just do it! (c)): krest2.html. Кода javascript в нём, пожалуй, даже и не больше, чем в первом решении – из-за Оперы нет смысла искать колонки по идентификаторам, и мы присваиваем раскрашивающий селектор класса всей таблице. За это приходится платить увеличением HTML-кода.
Как через класс таблицы можно по-разному раскрасить разные группы ячеек? Ясно, что только назначив каждой ячейке группы свой className. То есть логика такая: таблица с классом «c1» (color1) будет раскрашивать все вложенные элементы с классом «td1» в условленный цвет – это должно быть заранее описано в правилах CSS, для каждого класса (соответственно, например, класс таблицы «c2» будет менять фон всех элементов с классом «td2»).
Ясно, что куча всех этих классов в ячейках совершенно не нужна серверу. Ну, и становится тяжеловато «правильно» оперировать селекторами классов без специальной функции (из-за этого текущей ячейке цвет меняем напрямую – через свойство style).
Поиск идеального решения
Во-первых, проверим вариант управления цветом через колонки: krest3.html. В IE6 работает, в Опере, с. не работает! Ну, тут уже меня заело, полез копаться в Операх. В Опере версии 11.64 всё-таки работает. В версии 11.10 – нет. Забить или не забить. По-моему, быть хуже IE – это уже сверхнаглость. Забьём ради красоты решения.
Во-вторых, вернём «функциональность»: вместо двух безымянных функций для mouseover и mouseout сделаем, как в первом варианте одну функцию на всё – cBg.
В-третьих. ну, тут много всего. Надо просто сделать «нормально», «нормализовать» все взаимоотношения между javascript, CSS и сервером (HTML). Для начала просто поместим javascript, куда положено, – в HEAD, и вынесем в отдельный файл.
Вот что в результате получилось: krest.js. Кроме основного функционала подсветки, мы включили в этот файл вспомогательные «библиотечные» функции: cc (управление классами элементов), addLoadEvent (назначение очевидно). Основная сложность при подготовке таблицы оказалась в упорядочивании элементов col: мы предусматриваем ситуацию, когда эти элементы явно не переданы в HTML, и даже ситуацию, когда эти элементы переданы частично (например, в HTML описаны 2 элемента col, а реально в таблице 5 столбцов). Скрипт всё это обрабатывает и унифицирует, и в итоге в подготовленной таблице есть все элементы col с нужными классами (которые известны только javascript).
Интерфейсы
В нашей системе подсветки javascript в ответ на какие-то действия пользователя назначает некоторым элементам HTML некоторе классы CSS. Чтобы всё это правильно отображалось, классы должны быть описаны в правилах CSS (может быть, вообще в отдельном файле). У наименований селекторов CSS своя логика, их имена не должны зависеть от движка javascript. Поэтому во «входящей» функции системы – prepTableHL должны быть «ключики», позволяющие указывать javascript, с какими сущностями CSS следует работать.
У нас получилось внедрить только один такой ключик – наименование класса для подсветки строки (rowC): krest4.html. Ну, ещё можно сообщать js ширину таблицы, чтобы корректно работать с элементами col. А то у нас жёстко было зашито «15», и если ширина всего 5 ячеек, скрипт отчасти перемалывал пустоту (что, в общем, мелочь), а если 16. Что же, последняя колонка окрашиваться не будет? Мы, конечно, пытаемся взять ширину таблицы «на ходу» – по числу ячеек первой строки. Но ведь там могут быть объединённые ячейки. Поэтому приоритет остаётся за явным указанием ширины при вызове подготовительной функции – через параметр tW.
Неуправляемым «снаружи» остаётся у нас набор селекторов «класс таблицы» – «класс колонки», что-то вроде:
Во входной параметр при избранной архитектуре «движка» удаётся впихнуть только цвет фона (rowC). И это сводит на нет всю красоту. Это прямо-таки позор нашего скрипта подсветки (а что если понадобится красить столбцы не через цвет фона, а, например, через opacity? лезть в код скрипта. ). Всё надо менять.
Окончательное решение
Возвращаемся немного наверх по дереву планирования, к тому месту, где мы решили пренебречь Оперой 11.10. Раз уж мы это решили, зачем же оставили такую чреззадническую схему – управлять отображением колонок через смену классов таблицы? Оставили в надежде обмануть-таки Оперу (классы-то колонок ведь динамически не менялись! ну а вдруг да сработает?). Но надежда не оправдалась, и, для полной красоты, нам придётся пренебречь Оперой по полной.
То есть будем уж по-человечески, просто менять классы у колонок. Примерно как ничтоже сумняшеся сделали конкуренты. Но они сделали стрёмно, а мы сделаем качественно. В скрипте http://css-tricks.com/examples/RowColumnHighlighting/js/example-one.js в интересующей нас части используется следующая схема:
- При подготовке таблицы всем колонкам назначаются ID (почти, как у нас: col1, col2, col3. ).
- Во время исполнения (наступления mouseover) соответствующая колонка находится в DOM по своему ID, и ей присваивается нужный класс.
Это же страшно невыгодно! Мы один раз нашли элемент колонки (или даже сами создали его в одном из вариантов). Зачем потом ещё раз искать его по ID? Зачем вообще эти ID? Колонками не требуется управлять извне, из других скриптов. А внутри нашего собственного мы можем просто загнать ссылки на все колонки в массив, хранимый как свойство самой таблицы (t.cols).
А вот селекторы классов нужно передавать скрипту снаружи явно, через параметры rH (класс подсвеченной строки), colH (класс подсвеченной колонки), cH (класс подсвеченной ячейки). А реальное отображение этих классов, как и положено, определять в CSS.
Вот ответ, максимально приближённый к идеалу: krest5.html.
P.S. для Оперы 10.11
Ну, как же мы без Оперы. Там (в рабочем для Оперы варианте krest2.html) засада была в том, что нужно было иметь большой (раздутый!) HTML – у каждой ячейки должен был быть свой класс (одинаковые классы в пределах одной колонки – такие «псевдостолбцы»).
Зачем серверу знать все эти душераздирающие подробности? Перенесём генерацию классов ячеек в наш ненавязчивый javascript, и дело с концом: krest6.html. Любителям Оперы надо, однако, помнить, что в этом варианте останется жёсткая связка кода с CSS: там скрипт подрисовывает в начале страницы правило CSS, в котором подсвечиваемым элементам назначается конкретно background-color, а не имя CSS класса.
Веб-сайт в одной странице: самый короткий учебник HTML
- Установка archlinux 2017-12-08
- Галерея изображений
- Блокнот, MS Word и LibreOffice Writer
- Linux Mint в школе
- Сайт третьего поколения
- Как скрыть-отобразить элемент по щелчку на другом элементе?
- Подсветка строк и столбцов HTML-таблицы
- Ссылки next и previous на странице
- HTML в веб-приложении
- Информационные сущности или инфоблоки
- Шаблон и Контроллер
- Отделение данных от php кода
- javascript внутри веб-приложения
- ООП в PHP – антипаттерн
- Конструктор HTML форм
- Числа прописью с рублями, минутами и метрами
- Календарь javascript (datepicker)
- Что из чего следует в PHP-фреймворке «Friends»
- PHP фреймворк, анти-MVC, без ООП
- Идеальная функция setCookie
- Отображение настроек для javascript сортировки
- Что такое Контроллер mvc в вебе?
- javascript сортировщики, сравнение алгоритмов
- unobtrusive top.mail.ru
- Простой сортировщик HTML таблиц, версия 0.03
- Подсветка строк, столбцов и значений в HTML таблице
- Отложенная загрузка javascript
- Кэширование промежуточных результатов в веб-программировании
- javascript и php: синхронизация сущностей
- Скругление углов CSS, JavaScript
- Javascript и логика представления (design pattern «JS-словари»)
- Структура WYSIWYG-редактора сайта
- Подсветка картинки при наведении мыши
- Визуальные редакторы: для кого они?
- Веб/2: сайты нового поколения
- Как измерить скорость работы Javascript?
- Функция для работы с className в javascript
- Сортировщик HTML таблиц, версия 1
- Сортировщик HTML таблиц: концепция и «нулевой цикл»
- Как с очень высокой скоростью найти слово в большой таблице?
- Как в большом списке найти слово с очень высокой скоростью?
- HTML база данных лучше, чем Excel
- Javascript база данных
- Сортировщик HTML-таблиц, версия 1.3
- Проверка условий в Javascript
- Скрыть – показать HTML элементы с помощью Javascript
- Таймеры в Javascript (setInterval, setTimeout)
- Javascript фильтрация данных
- Javascript: вопросы и ответы
- Javascript: часто задаваемые вопросы
- Редактирование таблицы MySQL: Javascript интерфейс
- Редактирование таблицы MySQL в браузере
- 10 лучших функций Javascript
- Сортировка таблицы средствами JavaScript — DOM
- DHTML: условная разметка для HTML кода
- DHTML: защита форума
- DHTML: хранение настроек пользователя
- DHTML: проверка формы
- DHTML
- JavaScript
- HTML таблицы
- Самый быстрый браузер
Комментарии
Здравствуйте Как сделать, чтобы js не применялся к строке с классом .nolighting (при наведении на строку tr с таким классом не было подсветки строк и столбцов)
Здравствуйте Как сделать, чтобы js не применялся к строке с классом .nolighting (при наведении на строку tr с таким классом не было подсветки строк и столбцов)
Здравствуйте Как сделать, чтобы js не применялся к строке с классом .nolighting (при наведении на строку tr с таким классом не было подсветки строк и столбцов)
http://www.java-study.ru/jquery-uchebnik/93-obrabotka-sobytiy-jquery там есть событие blur, через поиск по странице посмотри. это событие javascript срабатывает когда покидаем форму
Очень хорошая статья. Но мне бы хотелось еще узнать, а как сделать чтобы подсвечивание столбца и строки фиксировалось при клике мыши, а при повторном клике подсвечивание отменялось.
Источник