我有一个 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;}
现在，当我将鼠标悬停在任何列上时，我想缩放整行。现在发生的只是我悬停在鳞片上的细胞。我应该做什么改变？这是因为我为 tr
td 定义了单独的样式
最佳答案
替换呢
.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;}
关于html - 对表行中的所有元素应用缩放变换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17503556/