1

以下のような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

4

1 に答える 1

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;}
于 2013-07-06T13:51:11.013 に答える