Подсветка блока при наведении курсора мыши

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

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>

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
{
    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%;
}

Можете создать собственный стиль ссылок, изменяя параметры css.