- Метки урока:
- web дизайн
- фон
- css
Смена фона блока информации при наведении мыши
В этом уроке мы будем учиться делать такие, блоки, которые при наведении на них курсора мыши подсвечиваются.
Пример таких блоков Вы можете посмотреть здесь
Реализация данного метода состоит из 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"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.