Страница 1 из 1

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

Добавлено: 18 сен 2011, 20:45
Александр
Таблица с изменением цвета ячеек при наведении

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

Пример таблицы http://flapps.ru/example/jquery/td-hove ... color.html

1. Код html страницы

Код: Выделить всё

<html><head><title>Цвет ячейки таблицы при наведении http://flapps.ru</title><link rel="stylesheet" href="style.css" type="text/css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript" src="code.js"></script></head><body> <h1>Цвет ячейки таблицы при наведении</h1><table class="pretty">    <tr>        <th style="width:250px;">Название</th>        <th style="width:200px;">Тематика</th>        <th style="width:150px;">Ссылка</th>    </tr>    <tr class="cl1">        <td>ВКонтакте API 3.0. Пример простого приложения </td>        <td>Уроки по использованию ВКонтакте API</td>        <td><a href="http://flapps.ru/forum/topic992.html">http://flapps.ru/forum/topic992.html</a></td>    </tr>    <tr class="cl2">        <td>IFrame-приложение ВКонтакте. Вывод информации о пользователе </td>        <td>Уроки IFrame ВКонтакте</td>        <td><a href="http://flapps.ru/forum/topic721.html">http://flapps.ru/forum/topic721.html</a></td>    </tr>    <tr class="cl1">        <td>Мой Мир API - Вывод информации о пользователе </td>        <td>Уроки по использованию API других социальных сетей</td>        <td><a href="http://flapps.ru/forum/topic602.html">http://flapps.ru/forum/topic602.html</a></td>    </tr>    <tr class="cl2">        <td>Создание флеш приложения для iPhone, iPod, iPad (Flash CS5) </td>        <td>Уроки по созданию приложений для мобильных устройств</td>        <td><a href="http://flapps.ru/forum/topic1655.html">http://flapps.ru/forum/topic1655.html</a></td>    </tr>    <tr class="cl1">        <td>Где скачать и как подключить jQuery</td>        <td>Уроки jQuery</td>        <td><a href="http://flapps.ru/forum/topic2662.html">http://flapps.ru/forum/topic2662.html</a></td>    </tr>       <tr class="cl2">        <td>Вывод данных из базы (PHP + MySQL) </td>        <td>Уроки на другие темы</td>        <td><a href="http://flapps.ru/forum/topic922.html">http://flapps.ru/forum/topic922.html</a></td>    </tr>   </table> </body></html>
2. Код файла стилей style.css

Код: Выделить всё

body {    font-family: Arial, Verdana, sans-serif;}.pretty {    border-collapse:collapse;    width:600px;    border-bottom:1px solid #666;    margin: 10px auto;}.pretty th {    border-bottom:1px solid #666;    text-align:left;    font-weight:normal;    font-size:12px;    padding:15px;    background:#009dde;}.pretty td {    text-align:left;    font-size:12px;    padding: 15px;}.pretty .cl1 td {    background:#ededed;}.pretty .cl2 td {    background:#ccc;}.pretty tr.over td {    background:#2cbd1a;}
3. Код файла code.js

Код: Выделить всё

$(function() {    $(".pretty tr").mouseover(function() {        $(this).addClass("over");    }).mouseout(function() {        $(this).removeClass("over");    });});

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

Добавлено: 19 сен 2011, 15:59
bodnar
эм... а с помощью псевдокласса в css :hover нельзя разве?

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

Добавлено: 19 сен 2011, 20:42
Александр
bodnar
В IE6 hover работает только с тегом ссылки. Можно конечно делать через expression, или вообще забить на IE6)
В уроке описан один из способов как сделать изменение цвета при наведении.

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

Добавлено: 20 сен 2011, 04:10
bodnar
я специально когда делал сайты делал проверку, если шестой ослик то выводил страницу с ссылками на другие браузеры)

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

Добавлено: 04 апр 2017, 10:17
сеошник
Спасибо за рабочий образец.!!!!!