Как при наведении мышкой на фотку отобразить на ней ссылку?

Рейтинг: 1Ответов: 1Опубликовано: 05.03.2015

Есть фотка и ссылка. Как при наведении мышкой на фотку отобразить на ней ссылку и чтоб она работала?

     <table id="product">
         <tr>
        <td>
            <img src="<?=$this->product["img"]?>" alt="<?=$this->product["title"]?>" />
            <a id="zum" href="<?=$this->product["img"]?>" rel="thumbnail">УВЕЛИЧИТЬ</a>
        </td>
                <td>
                ...
                </td>
        </tr>

</table>

Обновление

Стили есть, ссылка поверх фотки - с этим проблем нет. Вот нужно при наведении на фотку чтобы ссылка появлялась и по ней можно было кликнуть, а когда мышку забрать, то ссылка пропадала, а фотка оставалась в первоночальном состоянии, то есть осталась только фотка без ссылки.

javascript ссылки
Источник: Stack Overflow на русском

Ответы

▲ 1

Оберните картинку и ссылку в див и присвойте ему какой-нибудь класс. В моем примере у него класс wrap. По дефолту скройте картинку в стилях и спозиционируйте ее, например, внизу дива. При наведении на обертку показывайте ссылку.

Пример кода:

.wrap{position: relative;}
.link{position: absolute; display: none; bottom: 0; left: 0; right: 0; background: #fff;}
.wrap:hover .link{display: block;}

Классы элементов смените на свои.