Question

我有一个html文档如下。只是为了简洁而添加相关内容。

<body>
        <h2>View</h2>
        <div class="events-div">
            <table style="overflow-y:auto; height:500px">
                <tr>
                    <th class="content-cardnumber">Card Number</th>
                    <th class="content-eventcode">Event Code</th>
                    <th class="content-origintime">Event Time</th>            
                </tr>

                @foreach (IEvent e in Model.EventList)
                {
                    <tr class="events-row">
                        <td title="Test" class="content-cardnumber">@e.CardNumber</td>
                        <td class="content-eventcode">@e.EventCode</td>
                        <td class="content-origintime">@e.EventOriginTime</td>

                    </tr>
                }

            </table>
        </div>
    </body>

css如下：

.content-cardnumber{margin-left: auto;color:rgba(47,130,194,.8);width:200px;text-align:center;text-shadow:1px 2px 1px rgb(127, 193, 211);}
.content-origintime{margin-left: 110px;color:rgba(47,130,194,.8);text-align:center;text-shadow:1px 1px 1px rgb(127, 193, 211);}
.content-eventcode{margin-left: 130px;color:rgba(47,130,194,.8);text-align:center;width:200px;text-shadow:1px 2px 1px rgb(127, 193, 211);}
.content-readername{margin-left: 150px;color:rgba(47,130,194,.8);text-align:center;text-shadow:1px 2px 1px rgb(127, 193, 211);}
.events-table{background-color:#aacef6;overflow:auto;}
.events-div{overflow-y: auto;height: 500px;scrollbar-3dlight-color: rgb(127, 193, 211);scrollbar-face-color: rgb(127, 193, 211);scrollbar-base-color: #ffffff;}
.events-row{background-color:#c8ddf5;transition-property:all;transition-duration:0.8s;transition-timing-function:ease;}
.events-row:hover{background-color:white;transform:scale(1.5);}
.content-cardnumber:hover{text-shadow:none;transform:inherit;}
.content-readername:hover{text-shadow:none;transform:inherit;}
.content-origintime:hover{text-shadow:none;transform:inherit;}
.content-eventcode:hover{text-shadow:none;transform:inherit;}

现在，当我将鼠标悬停在任何列上时，我想缩放整行。现在发生的事情只是我悬停在尺度上的细胞。我应该做些什么改变？这是因为我为td

中的每个tr定义了一个单独的样式

Answer 1

如何替换

.events-row:hover{background-color:white;transform:scale(1.5);}
.content-cardnumber:hover{text-shadow:none;transform:inherit;}
.content-readername:hover{text-shadow:none;transform:inherit;}
.content-origintime:hover{text-shadow:none;transform:inherit;}
.content-eventcode:hover{text-shadow:none;transform:inherit;}

用这个？

.events-row:hover > td {background-color:white;transform:scale(1.5);text-shadow:none;}

将缩放变换应用于表格行中的所有元素

1 个答案: