使用css3属性时table的box-shadown被覆盖问题

最新推荐文章于 2023-04-10 20:45:07 发布

久礼

最新推荐文章于 2023-04-10 20:45:07 发布

阅读量4.1k

点赞数 1

分类专栏： js/jQuery 文章标签： css3

本文链接：https://blog.csdn.net/jurnlee/article/details/40081041

版权

js/jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初学使用css3各种效果，在设置鼠标划过显示阴影时，默认<td>总是下边的阴影被上面的覆盖掉，折腾了一下发现，原来是权重的问题，刚开始加大z-index没效果，测试了好久才想起z-index属性是对定位元素才有用的，加上position:relative问题就解决了。（ps.例子有点丑，别介）

<CSS>

<style>
* {
    margin:0px;
    padding:0px;
}
table{
    empty-cells: show;
    border-collapse:separate; /*只是为了重写reset中的collapse,否则无圆角效果*/
}
#tb_sty2{
	text-align:center;
	margin:0 auto;
	font-size:16px;
	line-height:22px;
	border-top: #708090 3px solid;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-webkit-border-top-radius: 3px;
}
#tb_sty2 td{
	padding:3px;
	border-bottom: #bbb thin solid;
}
#tb_sty2 tr:hover{
	box-shadow: 0px 0px 5px 2px rgba(120, 120, 120, 0.35);
	position: relative;   /**** look here  *****/
	z-index: 10;          /**** & here  *****/
}
#tb_sty2 tr:nth-child(1) td,#tb_sty2 tr:nth-child(1) th{
    color:#F4FAFF;
    font-size:18px;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    background-color:#708090 !important;
}
#tb_sty2 tr:nth-child(odd) td,#tb_sty2 tr:nth-child(odd) th{
    background: #dcdcdc;
}
#tb_sty2 tr:nth-child(even) td,#tb_sty2 tr:nth-child(even) th{
    background: #F4FAFF;
}
</style>

<HTML>

<table width="80%" border="0" cellspacing="0" cellpadding="0" id="tb_sty2" align="center">
        <tr>
            <td>公式名称</td>
            <td>公式名称</td>
            <td>公式名称</td>
        </tr>
        <tr >
            <td>公式名称</td>
            <td>公式名称</td>
            <td>公式名称</td>
        </tr>
        <tr >
            <td>公式名称</td>
            <td>公式名称</td>
            <td>公式名称</td>
        </tr>
    </table>

没加之前：（下方阴影被遮挡）