YOUSELLER
Суббота, 27.04.2024, 07:09
Приветствую Вас Гость | RSS
 
Главная Каталог статей и уроковРегистрацияВход
Меню сайта
Категории каталога
HTML [4]
CSS [8]
Для сайта [4]
Электронные деньги [2]
Разное [6]
Мини-чат
200
Наш опрос
Оцените мой сайт
Результаты | Архив опросов
Всего ответов: 18
Главная » Статьи » Уроки » CSS
Смена фона блока информации при наведении мыши
В этом уроке мы будем учиться делать такие, блоки, которые при наведении на них курсора мыши подсвечиваются.

Пример таких блоков Вы можете посмотреть здесь http://ruseller.com/examples/hoverblock.php

Реализация данного метода состоит из HTML и CSS части.

HTML часть:

<div id="links">
<ul>
<li><a href="#" title="yourtext">Название
<em>Описание</em>
<span>Дата</span></a></li>

<li><a href="#" title="yourtext">Название
<em>Описание</em>
<span>Дата</span></a></li>
</ul>
</div>

Блоков может быть и больше, добавляются они дублированием контейнера <li></li>

CSS часть:

#links ul {
list-style-type: none;
width: 700px;
}

#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}

#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}

* html #links li a { /* make hover effect work in IE */
width: 700px;
}

#links li a:hover {
background: #ffffcc;
}

#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}

#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}

Свойство width и цвета подсветки блоков и текста устанавливайте на своё усмотрение, в зависимости от того, какой ширины и раскраски должны быть Ваши блоки.

Категория: CSS | Добавил: Денис (10.08.2008) | Автор: Евгений Попов
Просмотров: 563 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
[05.08.2008][Евгений Попов]
А вы делаете эти дизайнерские ошибки на своём сайте? (1)
[05.08.2008][Евгений Попов]
5 точек потенциального клиента, которые должен знать каждый бизнесмен. (0)
[05.08.2008][Евгений Попов]
5 причин, по которым люди выберут Ваш товар. (0)
[05.08.2008][Евгений Попов]
Как превратить Ваш сайт в магнит влияния на клиентов? (0)
[05.08.2008][Евгений Попов]
Электронная коммерция и электронный (онлайн) бизнес. В чём различия? (0)
[05.08.2008][Евгений Попов]
Наступило лучшее время для начала бизнеса в Сети. (0)
[05.08.2008][Евгений Попов]
Бесплатный хостинг для ведения бизнеса - забудьте! (0)
[05.08.2008][Евгений Попов]
Цель - это путь к вершине! (0)
[05.08.2008][HTML]
Как замаскировать тэг H1 (1)
[05.08.2008][HTML]
Урок: Как правильно использовать фаил robots.txt для запрета индексации фаилов и папок? (0)
Поиск
Друзья сайта
php5.ru
[16.08.2008][Видеоуроки]
Как проще всего сделать поиск по сайту (2)
[17.08.2008][Видеоуроки]
Light Box 2 - создание слайдшоу на Вашем сайте (0)
[17.08.2008][Видеоуроки]
Создаем красивую пластиковую кнопку в Фотошопе (0)
[16.08.2008][Видеоуроки]
Как огородить Ваш ресурс от проблемных людей и сайтов (1)
[05.08.2008][Программы]
Total Commander 7.02a Powerpack - отличный фаил-менеджер (0)
[17.08.2008][Видеоуроки]
Создаем меню для сайта через Интернет (0)
[05.08.2008][Скрипты]
Движок форума PHPBB3 (3)
[08.08.2008][Видеоуроки]
Как создать форму обратной связи для сайта. (0)
[17.08.2008][Видеоуроки]
Как избавиться от спама с помощью Google? (1)
[16.08.2008][Видеоуроки]
Как проверить правильность ввода email в форму (0)
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright © 2024