表格行悬停背景色圆角效果

Question

表格行具有悬停背景。我需要在背景上做圆角。

table tbody tr#ClickableRow:hover {
  background-color: #fbf6e7;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
}

<tr id="ClickableRow">
  <td>
    <a href="http://somesite.com">Go Here</a>
    <p>To find about all the interestng animals found in this tourist attractions including zebra, giraffe..... ....
    </p>
  </td>
</tr>

这不起作用。我仍然得到平方的背景。

Answer 1

尝试在td 而不是tr 上应用边框半径

body {
  margin: 100px;
}
table tbody tr#ClickableRow:hover td {
  background-color: #fbf6e7;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  cursor: pointer;
}

<table>
  <tr id="ClickableRow">
    <td>
      <a href="http://somesite.com">Go Here</a>
      <p>To find about all the interestng animals found in this tourist attractions including zebra, giraffe..... ....
      </p>
    </td>
  </tr>
</table>

如果您的表格行有多个单元格，您可以这样做：http://jsfiddle.net/petersendidit/RzKbq/1/