テーブルのホバー上のボックスシャドウを作成する（背景の競合）

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インデックスを設定する必要が

.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; 
    } 

Answer 2

のためにあなたのtrtdに変更しないこと

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

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

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

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

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

 
.w16{ 
 
\t width: 16%; 
 

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

 
.w22{ 
 
\t width: 22%; 
 

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

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

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

 

 
.table-z{ 
 
\t border-collapse: collapse 
 
} 
 

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

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

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

 
.table-z tr:hover { 
 
\t box-shadow: 0px 0px 12px 5px red; 
 
\t 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>

下