Hover для строки таблицы

Подсветить строку и колонку таблицы при помощи CSS

Подсветить строку таблицы при помощи CSS достаточно легко: tr:hover и задача выполнена. Подсветить колонку всегда было немного сложнее, так как нет простого HTML-элемента, который бы являлся родителем ячейки таблицы в столбце. Есть просто решение на javascript, но в этой заметке мы рассмотрим решение без использования javascript.

Трюк в использовании громадных псевдоэлементов для элемента 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 , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Спецификации

Поддержка браузерами

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. Алгоритм такой:

1. Всем элементам col таблицы назначаем атрибуты id, значение которых заканчивается на число – индекс, начиная с нуля.
2. Таблице присваиваем атрибут onmouseover = [some function]
3. В функции-обработчике (мы назвали её cBg – от «change background») мы получаем индекс текущей ячейки (над которой мышь) – cellIndex, добавляем к этому индексу спереди условные буквы (у нас – «col_») и получаем идентификатор соответствующей (текущей, если мы всё правильно сделали) колонки.
4. Назаначаем найденной текущей колонке className = «green», предварительно описанный в правилах CSS.
5. Ну, а при противоположном событии (onmouseout) удаляем className green у текущей колонки.
6. Цвета фона текущей строки и ячейки попросту описываем в 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 в интересующей нас части используется следующая схема:

1. При подготовке таблицы всем колонкам назначаются ID (почти, как у нас: col1, col2, col3. ).
2. Во время исполнения (наступления 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 срабатывает когда покидаем форму

Очень хорошая статья. Но мне бы хотелось еще узнать, а как сделать чтобы подсвечивание столбца и строки фиксировалось при клике мыши, а при повторном клике подсвечивание отменялось.

Источник