<td>-Tags müssen mithilfe von HTML5 und CSS3 in externe Links umgewandelt werden

Question

Ich versuche, Besuchern das Klicken auf einen Link in einer Tabelle zu ermöglichen, die CSS3-Animationsklassen verwendet. Ich schaffe es anscheinend nicht, das DIV-Hintergrundbild in einen Link umzuwandeln. Siehe unten HTML und CSS3.

Ich möchte jedes machen <td> in einen anklickbaren externen Link...

Ich habe versucht, das zu umgeben <td> mit einem <a> Tag...habe versucht, das zu setzen <a> Tag innerhalb der <td> Etikett...

Vielen Dank für Ihre Hilfe...

Bitte sehen Sie sich diese Geige an - 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%;
}

Answer 1

Wenn Sie jeweils nur einen Link darin haben und den folgenden Stil darauf festlegen, erhalten Sie den gewünschten Effekt.(Sie könnten diesen Stil als Teil einer CSS-Klasse festlegen und dann jeden der Links so festlegen, dass er diese Klasse hat, um die Dinge übersichtlicher zu gestalten.)

<td>
    <a style="width:100%;height:100%;display:block" href="www.yourlink.com">
        Link
    </a>
</td>