tr标签使用hover的box-shadow效果不生效

先说问题：

　　这是大致的HTML结构

<table cellpadding="0" cellspacing="0"><thead><tr><th>Phone numberth><th>Dateth><th>Nameth><th>Labelth>tr>thead><tbody><tr><td>0342443td><td>10 August 2013td><td>Katetd><td>Loves catstd>td><tr><td>0342442td><td>9 August 2013td><td>Marytd><td>Boringtd>tr><tr><td>0342441td><td>8 August 2013td><td>Annatd><td>Loves extreme stufftd>tr>tbody>
table>

我想要在tr上添加一个效果，当鼠标滑过的时候应用box-shadow样式，让元素有被选中的表现方式。

所以我在css里面这样写

tr:hover {box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15);
}

在chrome，firefox，360这些浏览器里面效果正常。但是在ie10上面没有作用。

起初我认为是ie对hover的支持程度导致，所以去查阅相关问题和资料

并尝试：

　　　　使用js绑定mouseover事件，如果是ie浏览器的话就添加上box-shadow这个样式。结果当时是没用。于是我用li和div使用css的hover，在ie浏览器里面生效，

所以我就排除了hover的问题。

于是将问题定位于tr标签是否能应用box-shadow样式。所以我就找到了   这篇文章 

总结：

　　box-shadow属性生效于标签类型为display：block或者display：inline-block; 这就是为啥li和div生效。大家都知道tr的默认类型为 display： table-row

所以解决办法就是将tr的类型设置为block，但是这样问题又来了。改变类型之后，原本table tr带来的自适应宽高这些属性都失效了，所以还需要给td th一个最小宽度的

属性：min-width:100px;

如下样式：

td, th {min-width: 100px; }
tr { display: block; }
tr:hover { box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.15); }

很好，暂时解决了在ie浏览器下面的样式问题。

转载于:https://www.cnblogs.com/jjucap/p/8288998.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！