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

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/