將比例變換應用於表格行中的所有元素

我有一個如下所示的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

來源

2013-07-06 ckv

每個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;}

來源

2013-07-06 13:51:11

這種方式可行，但基於配置的延遲不會發生緩慢的顏色轉換。 – ckv

將比例變換應用於表格行中的所有元素

回答

相關問題