HTML5とCSS3を使用してタグを外部リンクに作成する必要がある
質問
私は訪問者が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