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

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

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.smileycat.com
Перевел: Евгений Попов
Урок создан: 11 Мая 2008
Просмотров: 55679
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^