HTML - 使多个td可链接

Question

所以我研究了使tr和td可链接，并且已经在整行中使用onclick方法。有没有办法让2 td链接到一个页面，2个链接到另一个页面？

function x() {
  window.location.href = 'x.com';
}

function y() {
  window.location.href = 'y.com';
}

table {
  width: 100%;
  height: 100px;
  border: 1px solid;
}

td {
  border: 1px solid;
}

.x:hover {
  background-color: red;
}

.y:hover {
  background-color: blue;
}

<table>
  <tr>
    <td class="x" onclick="javascript:x"></td>
    <!--I want these 2 td to be the same link-->
    <td class="x" onclick="javascript:x"></td>

    <td class="y" onclick="javascript:y"></td>
    <!--and this one be a different link-->
  </tr>

  <tr>
    <td class="x" colspan="2" onclick="javascript:x"></td>
    <!--so it looks like this but 2 cells are enclosed in the same link-->

    <td class="y" onclick="javascript:x"></td>
  </tr>
</table>

Answer 1

按类别链接HOVER效果

 $('.x').hover(function () {
    $('.x').toggleClass('active');
 });

table{
  width:100%;
  height:100px;
  border:1px solid;
}
td{
  border:1px solid;
}
.x:hover,
.active{
  background-color:red;
}
.y:hover{
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="x"></td> <!--I want these 2 td to be the same link-->
    <td class="x"></td>

    <td class="y"></td> <!--and this one be a different link-->
  </tr>
</table>

使用PURE CSS（如果类别正在发布）

table{
  width:100%;
  height:100px;
  border:1px solid;
}
td{
  border:1px solid;
}
.x:hover,
.x:hover ~ .x{
  background-color:red;
}
.y:hover{
  background-color:blue;
}

<table>
  <tr>
    <td class="x"></td> <!--I want these 2 td to be the same link-->
    <td class="x"></td>

    <td class="y"></td> <!--and this one be a different link-->
  </tr>
</table>