HTML5 및 CSS3를 사용하여 <td> 태그를 외부 링크로 만들어야 합니다.

Question

방문자가 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%;
}

Answer 1

각각 내부에 링크가 있고 여기에 다음 스타일을 설정하면 원하는 효과를 얻을 수 있습니다.(이 스타일을 CSS 클래스의 일부로 설정한 다음 해당 클래스를 갖도록 각 링크를 설정하여 작업을 더 깔끔하게 만들 수 있습니다)

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