一个关于hover属性有趣的问题(一个小坑)，求解释

Question

需求是，给一个table表格的tr添加hover效果,过年前是将background-color属性加在<tr>上，结果hover效果只有三边，当时百思不得骑姐。但是年后的我把background-color属性加在<tbody>上时，居然可以了。

---

我总结了下，也就是说，如果要实现这种列表式的悬浮阴影效果，首先是和background-color有关(我之前一直以为是和border属性有关)，其次这个background-color需要加在父级元素上，而不是需要浮动的元素本身。

演示示例

请大神解释下这是为什么?

刚刚看演示示例的时候又发现一个严重的问题，就是tr标签的hover效果在safari浏览器中，貌似不支持啊！！！该怎么解决

Answer 1

我感觉应该还是样式所在元素的“层级”关系导致的。

比如你将background加给td.并保证td之间有间距，可以看到阴影效果被'弟'元素中td的背景挡住了。
“层级”低的元素的样式无法覆盖“层级”高的元素的样式。
上面说的是兄元素和弟元素的子元素。
然后相邻元素的“层级”应该也是后面的高。

Answer 2

嗯 答案差不多。只是 “样式覆盖” 听着怪，也有问题。

HTML 中靠后的元素会盖住前面的元素，如果没有position`z-index`参与影响的话。故三边。不为元素定义background，则其无背景（透明），故展示正常。