CSS TD背景色覆盖轮廓颜色

时间：2019-09-16 12:09:32

标签： css

我有一张桌子，当鼠标悬停在单元格上方时，相应的列和行将突出显示。单击该单元格时也可以将其突出显示。我的问题是，单击时，单元格的背景色覆盖了此处的轮廓（红色和蓝色）。

我想知道如何使轮廓覆盖单元格的背景颜色。

这是我正在尝试的代码。

$(function () {
    $('td').click(function () {
        $(this).toggleClass('clicked_cell')
    })
})
            th{
                font-weight: normal;
                align-content: center;
                position: relative;
                text-align: center;

            }
            td {
                border: black solid;
                border-width: 1px 2px 1px 1px;
                padding: 5px;
                text-align: center;
                height:1.1cm;
                width:1.1cm;
                position: relative;
                background-clip: padding-box;
            }
            .col{
                width: 1.1cm;
            }
            .rotate {
                text-align: center;
                white-space: nowrap;
                 vertical-align: middle;
                width: 1.5em;
                }
            .rotate div {
                -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
                -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
                -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
                filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
                margin-left: -0.8cm;
                 margin-right: -0.8cm;
                }
            .float-left {
                width: 25%;
                float: left;
            }
            .circle1{
                height: 0.6cm;
                width: 4.65cm;
                outline: 2px dashed red;
                margin-top: -0.3cm;
                position:absolute;
                text-align: left;
                
            }
            .circle2{
                height:4.8cm;
                width:0.6cm;
                outline: 2px dashed rgb(0, 0, 255);
                position:absolute;
                text-align: center;
                margin-left: 0.35cm;
                
            }
            tr.hl:hover th:not([rowspan]),
            tr.hl:hover td {
                background-color: rgba(0,255,255,0.2);
            }
            td:hover::before {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                width: 100%;
                top: 0;
            }
            td:hover::after,
            .col:hover::after {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                height: 2000%;
                width: 100%;
                bottom: -1000%;
                left: 0;
                pointer-events: none;
            }
            table{
                overflow: hidden;
            }
            thead th{
                background-color:white;
                z-index: 1;
                box-shadow: 0 0 0 2px white;
            }
        .clicked_cell{
            background-color: gold !important;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <thead>


        <tr>
            <th colspan=5 style="text-align: right" >Player 1's Payoffs </th>
        </tr>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=3 style="font-size: smaller;">Player 2's actions</th>
        </tr>
        </thead>
        <tr>
            <th colspan="2"></th>
            <th class="col" style="text-align: center">d</th>
            <th class="col" style="vertical-align: top"><div class="circle2">e</div></th>
            <th class="col" style="text-align: center">f</th>
        </tr>

        <tr class="hl">
            <th rowspan=3 class="rotate" style="font-size: smaller;"> <div>Player 1's actions</div></th>
            <th><div class="circle1">a</div></th>
            <td>8</td>
            <td>20</td>
            <td>12</td>
        </tr>
        <tr class="hl">
            <th>b</th>
            <td>0</td>
            <td>8</td>
            <td>16</td>
        </tr>
        <tr class="hl">
            <th>c</th>
            <td>18</td>
            <td>12</td>
            <td>6</td>
        </tr>

    </table>

还是应该更改表格中的圆圈方法？

2 个答案:

答案 0 :(得分：1)

您可以使用z-index来控制轮廓在其他元素上方的放置，并使用pointer-events来使下面的元素可用于单击/点击。

.circle1,
.circle2 {
    z-index: 10; /* Lift it above other elements */
    pointer-events: none; /* Make it "unclickable" */
}

请注意，要使z-index生效，必须使用absolute或relative定位规则。您已经在.circle元素上使用了此功能。

编辑：这是使用您的代码段的一个有效示例：

$(function () {
    $('td').click(function () {
        $(this).toggleClass('clicked_cell')
    })
})
            th{
                font-weight: normal;
                align-content: center;
                position: relative;
                text-align: center;

            }
            td {
                border: black solid;
                border-width: 1px 2px 1px 1px;
                padding: 5px;
                text-align: center;
                height:1.1cm;
                width:1.1cm;
                position: relative;
                background-clip: padding-box;
            }
            .col{
                width: 1.1cm;
            }
            .rotate {
                text-align: center;
                white-space: nowrap;
                 vertical-align: middle;
                width: 1.5em;
                }
            .rotate div {
                -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
                -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
                -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
                filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
                margin-left: -0.8cm;
                 margin-right: -0.8cm;
                }
            .float-left {
                width: 25%;
                float: left;
            }
            .circle1{
                height: 0.6cm;
                width: 4.65cm;
                outline: 2px dashed red;
                margin-top: -0.3cm;
                position:absolute;
                text-align: left;
                z-index: 10;
                pointer-events: none;
            }
            .circle2{
                height:4.8cm;
                width:0.6cm;
                outline: 2px dashed rgb(0, 0, 255);
                position:absolute;
                text-align: center;
                margin-left: 0.35cm;
                z-index: 10;
                pointer-events: none;
            }
            tr.hl:hover th:not([rowspan]),
            tr.hl:hover td {
                background-color: rgba(0,255,255,0.2);
            }
            td:hover::before {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                width: 100%;
                top: 0;
            }
            td:hover::after,
            .col:hover::after {
                content: '';
                position: absolute;
                background-color: rgba(0,255,255,0.2);
                z-index: 0;
                height: 2000%;
                width: 100%;
                bottom: -1000%;
                left: 0;
                pointer-events: none;
            }
            table{
                overflow: hidden;
            }
            thead th{
                background-color:white;
                z-index: 1;
                box-shadow: 0 0 0 2px white;
            }
        .clicked_cell{
            background-color: gold !important;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <thead>


        <tr>
            <th colspan=5 style="text-align: right" >Player 1's Payoffs </th>
        </tr>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=3 style="font-size: smaller;">Player 2's actions</th>
        </tr>
        </thead>
        <tr>
            <th colspan="2"></th>
            <th class="col" style="text-align: center">d</th>
            <th class="col" style="vertical-align: top"><div class="circle2">e</div></th>
            <th class="col" style="text-align: center">f</th>
        </tr>

        <tr class="hl">
            <th rowspan=3 class="rotate" style="font-size: smaller;"> <div>Player 1's actions</div></th>
            <th><div class="circle1">a</div></th>
            <td>8</td>
            <td>20</td>
            <td>12</td>
        </tr>
        <tr class="hl">
            <th>b</th>
            <td>0</td>
            <td>8</td>
            <td>16</td>
        </tr>
        <tr class="hl">
            <th>c</th>
            <td>18</td>
            <td>12</td>
            <td>6</td>
        </tr>

    </table>

答案 1 :(得分：1)

据我所知，如果要使整个区域保持可点击状态，最好的方法是减少clicked_cell的不透明度：

您可以使用：

.clicked_cell {
    background-color: rgba(255, 215, 0, 0.5) !important;
}
相关问题
最新问题