Всплывающая картинка при наведении на ссылку

Jemand — Sat, 07 Nov 2009 11:58:03 +0000

Сразу пример того, что получится, а потом уже код.
Собственно тому, что получается при использовании данного примера, можно придумать много применений, но первое – это конечно меню.

CSS-код:

ul {
position: relative;
width: 100px;
list-style: none;
}
li {
border: 1px solid;
margin: 2px;
padding-left: 5px;
}
a {
display: block;
}
a img {
display: none;
position: absolute;
top: 0;
border: 0;
left: 100%;
}
a:hover img {
display: block;
}

HTML-код:

<ul>
<li><a href="#">  Jemand <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#">  Lyces <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#">  Светлая <img src="image-when-hover-on-link.gif" /></a></li>
</ul>

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64

HTML CSS Blog » Картинка при наведении

Всплывающая картинка при наведении на ссылку