Подсветка блока при наведении курсора мыши
В этом уроке мы научимся создавать блоки, фон которых будет меняться при наведении на них курсора.
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.
Нет комментариев