需要制作 <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