Сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши - «Таблицы» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Наш опрос



Наши новости

       005f1294
27-03-2016, 15:14
Сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши - «Таблицы»
Рейтинг:

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Задать цвет фона строки таблицы и цвет текста при наведении на неё курсора мыши.

Решение

Стиль элемента при наведении на него курсора мыши определяется с помощью псевдокласса :hover, он добавляется к нужному селектору. Для изменения стиля строки таблицы, :hover следует добавить к селектору tr, задав желаемый цвет фона через свойство background.

Поскольку правило будет распространяться на все строки таблицы, что не всегда желательно, то в таблицу можно добавить тег <tbody>, внутри которого цвет строк будет меняться (пример 1).

Пример 1. Использование псевдокласса :hover

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   td, th {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid #000; /* Параметры рамки */
   }
   th {
    background: #afd792; /* Цвет фона */
    color: #333;  /* Цвет текста */
   }
   tbody tr:hover {
    background: #f3bd48; /* Цвет фона при наведении */
    color: #fff; /* Цвет текста при наведении */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th></th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tbody>
    <tr>
     <td>Рубины</td><td>43</td><td>51</td><td>79</td>
    </tr>
    <tr>
     <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
    </tr>
    <tr>
     <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

В данном примере меняется цвет фона ячеек и текста. Результат примера продемонстрирован на рис. 1.

Рис. 1. Выделеная строка

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Internet Explorer Chrome Opera Safari Firefox Android iOS 7.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Задать цвет фона строки таблицы и цвет текста при наведении на неё курсора мыши. Решение Стиль элемента при наведении на него курсора мыши определяется с помощью псевдокласса :hover, он добавляется к нужному селектору. Для изменения стиля строки таблицы, :hover следует добавить к селектору tr, задав желаемый цвет фона через свойство background. Поскольку правило будет распространяться на все строки таблицы, что не всегда желательно, то в таблицу можно добавить тег , внутри которого цвет строк будет меняться (пример 1). Пример 1. Использование псевдокласса :hover HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере меняется цвет фона ячеек и текста. Результат примера продемонстрирован на рис. 1. Рис. 1. Выделеная строка
Просмотров: 3 474
Комментариев: 0:   27-03-2016, 15:14
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме: