表格行懸停背景色圓角效果

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/