KorPaEv
Member
- Регистрация
- 08.07.2011
- Сообщения
- 17
Доброго времени суток!
Вопрос в следующем.
Есть контейнер со списком, элементы списка - картинки и ссылки на них сразу.
Картинки имеют определенный размер например 123 на 123, оставляю 2 пикселя на рамку.
Есть бэкграунд для картинки и при наведении на картинку он должен появляться.
Как в css прописать так, чтобы при наведении на эту картинку появлялся бэкграунд но таким же размером как мое исходное изображение??
Вот мой код, но при наведении на картинку у меня появляется желаемый бэкграунт но как бы в подчеркивании этой ссылки.
ХТМЛ
ЦСС
Так вот у меня бэкграунд заменяется, но он прорисовывается в линии подчеркивания а мне нужно чтобы он применялся во всю ширину картинки и длинну соответственно.
Вопрос в следующем.
Есть контейнер со списком, элементы списка - картинки и ссылки на них сразу.
Картинки имеют определенный размер например 123 на 123, оставляю 2 пикселя на рамку.
Есть бэкграунд для картинки и при наведении на картинку он должен появляться.
Как в css прописать так, чтобы при наведении на эту картинку появлялся бэкграунд но таким же размером как мое исходное изображение??
Вот мой код, но при наведении на картинку у меня появляется желаемый бэкграунт но как бы в подчеркивании этой ссылки.
ХТМЛ
Код:
<div id="content_pic">
<div id="content_pic_ul">
<ul>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
<li><a href="#"><img src="pic/stamp.png" width="123" height="123" title="картинка" alt="картинка" /></a></li>
</ul>
</div>
</div>
Код:
div#content_pic
{
overflow:hidden;
padding:0 15px;
}
div#content_pic_ul ul
{
list-style:none;
margin:0;
padding:0;
width:805px;
}
div#content_pic_ul ul li
{
float:left;
margin:0 34px 34px 0;
border:#0033cc 2px inset;
}
div#content_pic_ul ul a
{
text-decoration:none;
}
div#content_pic_ul ul a:hover
{
background:url(../img/text_ahref.png) no-repeat;
}