Table tr make box-shadow on hover (background conflict) - html

Question

I'm having trouble with a box shadow on hover and table <TD> background.
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>
How can I make tr box shadow on hover and save custom backgrounds on td?

Answer 1

Use background color with alpha channel.
background-color: rgba(226, 226, 226, 0.3)

Answer 2

You need to set a z-index for the td that allows the shadow to show on it and not under it
.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 3

simply change your tr to td for the hover
.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;
}