В недалеком примере я привел пример выпадающей подсказки при наведении на span, идея хорошо развивается. В этот раз я покажу, как интересно можно сделать второстепенное меню ссылок, открывающееся по наведении на картинку курсора мыши
HTML участок прост, в один блок мы заключаем другой (по моей идее - того же размера), во внутреннем блоке содержатся пункты меню:
<div class=”list”>
<div class=”lista”>
<div class=”1″ onclick=”location.href=’http://yandex.ru’;”></div>
<div class=”2″ onclick=”location.href=’http://yandex.ru’;”></div>
<div class=”3″ onclick=”location.href=’http://yandex.ru’;”></div>
</div>
</div>* This source code was highlighted with Source Code Highlighter.
Пункты я изобразил div’ами, но это уже на свой вкус.
Теперь CSS:
.list {
width: 282px;
height: 233px;
position: relative;
float: left;
background: url(images/list.png);
}
.list .lista {
width: 282px;
height: 233px;
position: relative;
float: left;
display: none;
}
div.list:hover {
position: relative;
width: 282px;
height: 233px;
}
div.list:hover .lista {
display: inline;
position:relative;
float:left;
background: url(images/lista.png);
}* This source code was highlighted with Source Code Highlighter.
Изображения list и lista - соответственно картинки в свободном состоянии и при наведении (active).
