Таблица с изменением цвета ячеек при наведении

jQuery для начинающих

Таблица с изменением цвета ячеек при наведении

Сообщение Александр » 18 сен 2011, 20:45

Таблица с изменением цвета ячеек при наведении

В этом уроке вы узнаете как с помощью CSS и jQuery сделать таблицу с чередующимися цветами ячеек и изменением цвета ячеек при наведении курсора мыши.

Пример таблицы Чтобы увидеть ссылку - зарегистрируйтесь

1. Код html страницы
  1. <html>
  2. <head>
  3. <title>Цвет ячейки таблицы при наведении http://flapps.ru</title>
  4. <link rel="stylesheet" href="style.css" type="text/css" />
  5. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  6. <script type="text/javascript" src="code.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <h1>Цвет ячейки таблицы при наведении</h1>
  11. <table class="pretty">
  12.     <tr>
  13.         <th style="width:250px;">Название</th>
  14.         <th style="width:200px;">Тематика</th>
  15.         <th style="width:150px;">Ссылка</th>
  16.     </tr>
  17.     <tr class="cl1">
  18.         <td>ВКонтакте API 3.0. Пример простого приложения </td>
  19.         <td>Уроки по использованию ВКонтакте API</td>
  20.         <td><a href="http://flapps.ru/forum/topic992.html">topic992.html</a></td>
  21.     </tr>
  22.     <tr class="cl2">
  23.         <td>IFrame-приложение ВКонтакте. Вывод информации о пользователе </td>
  24.         <td>Уроки IFrame ВКонтакте</td>
  25.         <td><a href="http://flapps.ru/forum/topic721.html">topic721.html</a></td>
  26.     </tr>
  27.     <tr class="cl1">
  28.         <td>Мой Мир API - Вывод информации о пользователе </td>
  29.         <td>Уроки по использованию API других социальных сетей</td>
  30.         <td><a href="http://flapps.ru/forum/topic602.html">topic602.html</a></td>
  31.     </tr>
  32.     <tr class="cl2">
  33.         <td>Создание флеш приложения для iPhone, iPod, iPad (Flash CS5) </td>
  34.         <td>Уроки по созданию приложений для мобильных устройств</td>
  35.         <td><a href="http://flapps.ru/forum/topic1655.html">topic1655.html</a></td>
  36.     </tr>
  37.     <tr class="cl1">
  38.         <td>Где скачать и как подключить jQuery</td>
  39.         <td>Уроки jQuery</td>
  40.         <td><a href="http://flapps.ru/forum/topic2662.html">topic2662.html</a></td>
  41.     </tr>   
  42.     <tr class="cl2">
  43.         <td>Вывод данных из базы (PHP + MySQL) </td>
  44.         <td>Уроки на другие темы</td>
  45.         <td><a href="http://flapps.ru/forum/topic922.html">topic922.html</a></td>
  46.     </tr>   
  47. </table>
  48.  
  49. </body>
  50. </html>


2. Код файла стилей style.css
  1. body {
  2.     font-family: Arial, Verdana, sans-serif;
  3. }
  4. .pretty {
  5.     border-collapse:collapse;
  6.     width:600px;
  7.     border-bottom:1px solid #666;
  8.     margin: 10px auto;
  9. }
  10. .pretty th {
  11.     border-bottom:1px solid #666;
  12.     text-align:left;
  13.     font-weight:normal;
  14.     font-size:12px;
  15.     padding:15px;
  16.     background:#009dde;
  17. }
  18. .pretty td {
  19.     text-align:left;
  20.     font-size:12px;
  21.     padding: 15px;
  22. }
  23. .pretty .cl1 td {
  24.     background:#ededed;
  25. }
  26. .pretty .cl2 td {
  27.     background:#ccc;
  28. }
  29. .pretty tr.over td {
  30.     background:#2cbd1a;
  31. }


3. Код файла code.js
  1. $(function() {
  2.     $(".pretty tr").mouseover(function() {
  3.         $(this).addClass("over");
  4.     }).mouseout(function() {
  5.         $(this).removeClass("over");
  6.     });
  7. });
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Таблица с изменением цвета ячеек при наведении

Сообщение bodnar » 19 сен 2011, 15:59

эм... а с помощью псевдокласса в css :hover нельзя разве?
Обязательно к прочтению: ActionScript 3.0 Ошибки среды выполнения
Аватара пользователя
bodnar
Модератор
Модератор
 
Сообщения: 1399
Зарегистрирован: 03 апр 2010, 06:41
Благодарил (а): 16 раз.
Поблагодарили: 185 раз.

Re: Таблица с изменением цвета ячеек при наведении

Сообщение Александр » 19 сен 2011, 20:42

bodnar
В IE6 hover работает только с тегом ссылки. Можно конечно делать через expression, или вообще забить на IE6)
В уроке описан один из способов как сделать изменение цвета при наведении.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Таблица с изменением цвета ячеек при наведении

Сообщение bodnar » 20 сен 2011, 04:10

я специально когда делал сайты делал проверку, если шестой ослик то выводил страницу с ссылками на другие браузеры)
Обязательно к прочтению: ActionScript 3.0 Ошибки среды выполнения
Аватара пользователя
bodnar
Модератор
Модератор
 
Сообщения: 1399
Зарегистрирован: 03 апр 2010, 06:41
Благодарил (а): 16 раз.
Поблагодарили: 185 раз.

Re: Таблица с изменением цвета ячеек при наведении

Сообщение сеошник » 04 апр 2017, 10:17

Спасибо за рабочий образец.!!!!!
Аватара пользователя
сеошник

 
Сообщения: 1
Зарегистрирован: 04 апр 2017, 10:11
Откуда: Тюмень
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.


Вернуться в Уроки jQuery



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1