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

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>

这不起作用.我仍然得到平方的bg.

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/