如何在悬停时向表tr元素添加框阴影？

本文介绍了如何在悬停时向表tr元素添加框阴影？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

因此，我试图在悬停时向我的表 tr 添加一个框阴影。

它在Firefox中正常工作，但没有其他浏览器。

CSS：

table tbody tr：hover { background-color：＃13326b; color：#ffffff; text-shadow：1px 2px＃000000; box-shadow：0px 0px 10px＃ff0000; -webkit-box-shadow：0px 0px 10px＃ff0000; -moz-box-shadow：0px 0px 10px＃ff0000; }

HTML： b

< table class =table table-list-search> < thead> < tr> < th>徽标< / th> < th>名称< / th> < th>符号< / th> < th> Sector< / th> < th>子扇区< / th> < / tr> < / thead> < tbody> < tr> < td>示例< / td> < td>过滤器< / td> < td> 12-11-2011 11：11< / td> < td> OK< / td> < td> 123< / td> < / tr> < tr> < td> Try< / td> < td> It< / td> < td> 11-20-2013 08：56< / td> < td> It< / td> < td>作品< / td> < / tr> < tr> < td>§< / td> < td> $< / td> < td>％< / td> < td>&< / td> < td> /< / td> < / tr> < / tbody> < / table>

以下是在Firefox中显示的图片： >

下面是在Chrome中显示的图片：

DEMO HERE

如何编辑我的CSS以应用此框阴影悬停浏览器？

解决方案

这是您的css编辑

table { box-sizing：border-box; border-bottom：1px solid＃e8e8e8; } table tbody tr：hover { background-color：＃13326b; color：#ffffff; text-shadow：1px 2px＃000000; box-shadow：0px 0px 10px＃ff0000; -webkit-box-shadow：0px 0px 10px＃ff0000; -moz-box-shadow：0px 0px 10px＃ff0000; } td，th { padding-left：16px; min-width：170px; text-align：left; } tr { display：block; } table tbody tr，table tbody td { height：100px; }

这里是演示链接 - jsfiddle/Gx7Uy/6/

So I am attempting to add a box shadow to my table tr element upon hover.

Currently, it is working perfectly in Firefox, but no other browser.

CSS:

table tbody tr:hover { background-color:#13326b; color:#ffffff; text-shadow: 1px 2px #000000; box-shadow: 0px 0px 10px #ff0000; -webkit-box-shadow: 0px 0px 10px #ff0000; -moz-box-shadow: 0px 0px 10px #ff0000; }

HTML:

<table class="table table-list-search"> <thead> <tr> <th>Logo</th> <th>Name</th> <th>Symbol</th> <th>Sector</th> <th>Sub-Sector</th> </tr> </thead> <tbody> <tr> <td>Sample</td> <td>Filter</td> <td>12-11-2011 11:11</td> <td>OK</td> <td>123</td> </tr> <tr> <td>Try</td> <td>It</td> <td>11-20-2013 08:56</td> <td>It</td> <td>Works</td> </tr> <tr> <td>§</td> <td>$</td> <td>%</td> <td>&</td> <td>/</td> </tr> </tbody> </table>

Here is an image of how it displays in Firefox:

Here is an image of how it displays in Chrome:

DEMO HERE

How could I edit my CSS to apply this box shadow hover for all browsers?

解决方案

This is your css i edited

table { box-sizing: border-box; border-bottom: 1px solid #e8e8e8; } table tbody tr:hover { background-color:#13326b; color:#ffffff; text-shadow: 1px 2px #000000; box-shadow: 0px 0px 10px #ff0000; -webkit-box-shadow: 0px 0px 10px #ff0000; -moz-box-shadow: 0px 0px 10px #ff0000; } td, th { padding-left: 16px; min-width: 170px; text-align: left; } tr { display: block; } table tbody tr , table tbody td{ height:100px; }

Here is demo link - jsfiddle/Gx7Uy/6/