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

**Александр** » 18 сен 2011, 20:45

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

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

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

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">topic992.html</a></td>
    </tr>
    <tr class="cl2">
        <td>IFrame-приложение ВКонтакте. Вывод информации о пользователе </td>
        <td>Уроки IFrame ВКонтакте</td>
        <td><a href="http://flapps.ru/forum/topic721.html">topic721.html</a></td>
    </tr>
    <tr class="cl1">
        <td>Мой Мир API - Вывод информации о пользователе </td>
        <td>Уроки по использованию API других социальных сетей</td>
        <td><a href="http://flapps.ru/forum/topic602.html">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">topic1655.html</a></td>
    </tr>
    <tr class="cl1">
        <td>Где скачать и как подключить jQuery</td>
        <td>Уроки jQuery</td>
        <td><a href="http://flapps.ru/forum/topic2662.html">topic2662.html</a></td>
    </tr>   
    <tr class="cl2">
        <td>Вывод данных из базы (PHP + MySQL) </td>
        <td>Уроки на другие темы</td>
        <td><a href="http://flapps.ru/forum/topic922.html">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");
    });
});

Группа ВКонтакте vk.com/club17157755

Твитнуть

**bodnar** » 19 сен 2011, 15:59

эм... а с помощью псевдокласса в css :hover нельзя разве?

**Александр** » 19 сен 2011, 20:42

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

**bodnar** » 20 сен 2011, 04:10

я специально когда делал сайты делал проверку, если шестой ослик то выводил страницу с ссылками на другие браузеры)

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

Спасибо за рабочий образец.!!!!!

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

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

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

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

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

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

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