Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > При навидении на ссылки меню появляется картинка

Автор: WebSchool 20.11.2011, 16:40

Подскажите грамотную реализацию, меню:

Код


<div class="menu">
<a href="?id=1"><img width="20" height="20" src="img/lnav.png">1111</a>
<a href="?id=2"><img width="20" height="20" src="img/lnav.png">2222</a>
<a href="?id=3"><img width="20" height="20" src="img/lnav.png">3333</a>
<a href="?id=4"><img width="20" height="20" src="img/lnav.png">4444</a>
</div>

Чтобы слева от текста появлялась картинка, при навидении. Сейчас делаю на jquery, но текст определяется ссылкой не весь, а только верхняя его часть.

Предпочтительно решение на css, если возможно. Спасибо!

Автор: $дмитрий 20.11.2011, 19:16

Можно вместо картинок(img) задать для тега A фоновую картинку(background-image), а при :hover менять смещение фона (background-position). Это решение на чистом CSS

Автор: WebS 10.12.2011, 15:34

Если Вас не затруднит, привидите пример пожалуйста.

Как ограничить область отображения фона?

Автор: $дмитрий 10.12.2011, 17:55

Примерно так

Код


a{
    background:url(passive.gif) 0 0 no-repeat;
    display:block;
    padding-left:10px;
}
a:hover{
    background-image:url(active.gif);
}

Если фон спрайтом, то просто меняем background-position