表tr在悬停时制作盒子阴影（背景冲突）

Question

我在悬停和桌面<TD>背景上遇到了框阴影问题。

Here is a fiddle

<table class="table-z">
  <tr>
    <td class="w6">
      <label>
        <input type="checkbox" checked>
      </label>
    </td>
    <td class="w7">
    </td>
    <td class="w10">
      Tez Tour
    </td>
    <td class="w17">
      <div>
        tez-tour.com
      </div>
    </td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last orange ">На рассмотрении</td>
  </tr>
  <tr>
    <td class="w6">
      <input type="checkbox">
    </td>
    <td class="w7">
    </td>
    <td class="w10">Мвидео</td>
    <td class="w17">mvideo.ru</td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last red">Отказ</td>
  </tr>
</table>

如何在悬停时制作tr框阴影并在td上保存自定义背景？

Answer 1

您需要为td设置一个z-index，允许阴影显示在其上而不是阴影下

.table-z tr{
	height: 50px;
	text-align: center;
	font-size: 16px;
  position: relative;
}
.table-z td {
  z-index: -1;
  position: relative;
}
.table-z{
	margin-top: 10px;
	margin-left: 10px;
	width: 100%;
}

.w6{
	padding-left: 2%;
	width: 6%;
	background: yellow;
	border-left: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}
.w7{
	width: 7%;
	background: yellow;
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}

.w10{
	width: 10%;
	background: yellow;
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}

.w17{
	width: 17%;
	background: yellow;
	border-right: 1px solid #e1e1e1;

	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}

.w16{
	width: 16%;

	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}

.w22{
	width: 22%;

	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}

td.last{
	text-align: right;
	padding-right: 35px;

	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
}


.table-z{
	border-collapse: collapse
}

.table-z tr:last-child td:first-child {
	border-bottom-left-radius: 5px;
}

.table-z tr:last-child td:last-child {
	border-bottom-right-radius: 5px;
}

.le{
	margin-left: 10px;
	width: 240px;
}
table {
	border-collapse: collapse;
	border-radius: 5px;
	border-style: hidden; /* hide standard table (collapsed) border */
	box-shadow: 0 0 0 1px #e1e1e1; /* this draws the table border  */
}

.table-z tr:hover {
	box-shadow: 0px 0px 12px 5px red;
	cursor: pointer;
}

<table class="table-z">
  <tr>
    <td class="w6">
      <label>
        <input type="checkbox" checked>
      </label>
    </td>
    <td class="w7">
    </td>
    <td class="w10">
      Tez Tour
    </td>
    <td class="w17">
      <div>
        tez-tour.com
      </div>
    </td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last orange ">На рассмотрении</td>
  </tr>
  <tr>
    <td class="w6">
      <input type="checkbox">
    </td>
    <td class="w7">
    </td>
    <td class="w10">Мвидео</td>
    <td class="w17">mvideo.ru</td>

    <td class="w16">Заказ № 34546</td>
    <td class="w22">Стоимость 20 000 ₽</td>
    <td class="last red">Отказ</td>
  </tr>
</table>

Answer 2

使用带有Alpha通道的背景色。

background-color: rgba(226, 226, 226, 0.3)

Answer 3

只需将您的tr更改为td即可停留

.table-z TD:hover {
        -webkit-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
        -moz-box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
        box-shadow: 0px 0px 12px 5px rgba(233,233,233,1);
        cursor: pointer;
    }