Необходимо превратить теги <td> во внешние ссылки, используя HTML5 и CSS3.
Вопрос
Я пытаюсь разрешить посетителям щелкать ссылку внутри таблицы, в которой используются классы анимации CSS3... Кажется, мне не удается превратить фоновое изображение DIV в ссылку... см. ниже HTML и CSS3...
Я хотел бы сделать каждый <td>
в кликабельную внешнюю ссылку...
Я пытался окружить <td>
с <a>
тег... пытался поставить <a>
тег внутри <td>
ярлык...
Спасибо за вашу помощь...
Пожалуйста, посмотрите эту скрипку - jsFiddle
HTML:
<div id="partner_holder">
<table width="75%" height="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td class="showbox slideright"><div id="partner_holder_1"></div></td>
<td class="showbox slideright"><div id="partner_holder_2"></div></td>
</tr>
<tr>
<td class="showbox slideright"><div id="partner_holder_3"></div></td>
<td class="showbox slideright"><div id="partner_holder_4"></div></td>
</tr>
<tr>
<td class="showbox slideright"><div id="partner_holder_5"></div></td>
<td class="showbox slideright"><div id="partner_holder_6"></div></td>
</tr>
</table>
</div>
CSS:
#gallery_holder
{
width:90%;
margin-top:5%;
margin-left:15%;
color:white;
height:450px;
background:none;
}
#gallery_holder_1
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic1.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
.showbox {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.showbox.slideright:hover {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
#gallery_holder_2
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic2.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_3
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic3.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_4
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic4.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_5
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic5.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
#gallery_holder_6
{
width:100%;
height:100%;
margin-top:0%;
background: url(../images/pic6.png);
overflow:none;
background-repeat: no-repeat;
background-size:100% 100%;
}
Решение
Если у вас просто есть ссылка внутри каждого из них и вы устанавливаете для нее следующий стиль, вы получите желаемый эффект.(вы можете установить этот стиль как часть класса CSS, а затем установить каждую ссылку на этот класс, чтобы все было аккуратнее)
<td>
<a style="width:100%;height:100%;display:block" href="www.yourlink.com">
Link
</a>
</td>
Не связан с StackOverflow