html - 如何在tr:hover上的<tr>上获取边界半径？

首先，我有一个很大的<div class="content">，其中包含<table>，我想要的是：


表格（或内容）需要边框半径（10像素）
当在每行上传递光标时（不是<table>而是<tr>：背景颜色会发生变化（没关系），但是内容需要保持边框半径（暂时不行->这是我的问题）


如何使显示的<div class=content">的边界半径（现在tr被“覆盖它，并且边界半径在悬停时消失了）”

这是一个简单的脚本（当悬停=相同宽度，相同边框半径时，黄色必须与灰色相同）

.content{
  width:100%;
  height:auto;
  border-radius:10px;
  background-color:gray;
}

table{
  width:100%;
  cursor:pointer;
}

tr{
  width:100%;
  border-radius:10px !important;
}

table tr:hover{
  background-color:gold;
  border-radius:10px;
}

<div class="content">
<table>
<tr>
  <td>hello</td>
  <td>world</td>
</tr>
</table>
</div>

最佳答案

border-radius需要应用于td元素。

使用:first-child和:last-child选择器应用边界半径。

.content {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background-color: gray;
}
table {
  width: 100%;
  cursor: pointer;
}
tr {
  width: 100%;
  border-radius: 10px !important;
}
table tr:hover {
  background-color: gold;
  border-radius: 10px;
}
table tr:hover td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
table tr:hover td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<div class="content">
  <table>
    <tr>
      <td>hello</td>
      <td>world</td>
    </tr>
  </table>
</div>

关于html - 如何在tr:hover上的<tr>上获取边界半径？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38432931/