Добавить в избранное

Смена фона блока информации при наведении мыши

Дата: 2011-10-16

В этом уроке мы будем учиться делать такие, блоки, которые при наведении на них курсора мыши подсвечиваются.

Пример таких блоков Вы можете посмотреть здесь

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

HTML часть:

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


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 и цвета подсветки блоков и текста устанавливайте на своё усмотрение, в зависимости от того, какой ширины и раскраски должны быть Ваши блоки.

 

 

 

 сайт tiwebmaster.ru

 

Просмотров: 2119

Последние 5 уроков

Стильное поле поиска на CSS3

Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.


Как с помощью CSS сделать фон на всю страницу?

Из этого урока Вы узнаете как сделать фон на всю страницу, при этом Вам будет не важно, какое разрешение на мониторе того посетителя, который будет смотреть Ваш сайт.


Смена фона блока информации при наведении мыши

Интересный эффект смены фона блока с текстом при наведении мыши. Реализовано с помощью HTML+CSS.


Как сделать красивую полосу прокрутки на Вашем сайте?

Изучив этот урок, Вы узнаете как изменить дизайн полосы прокрутки на Вашем сайте таким образом, чтобы она вписывалась в остальной дизайн сайта.


Делаем красивые CSS списки для сайта

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


Видео уроки по php,jquery,ajax,css,html,сео