Question

在此表中，我应用了一个CSS 这里的例子 http://gridviewscroll.aspcity.idv.tw/Demo.aspx 和例子 https://github.com/twlikol/GridViewScroll

<table cellspacing="0" id="gvMain2" style="width: 100%; border-collapse: collapse;"> 
    <tr class="GridViewScrollHeader">
        <th>StandardCost</th>
        <th>ListPrice</th>
        <th>SafetyStockLevel</th>
        <th>SellStartDate</th>
        <th>SellEndDate</th>
        <th>ModifiedDate</th>
        <th>ProductID</th>
        <th>Name</th>
        <th>Number</th>
        <th>ReorderPoint</th>
        <th>Weight</th>
    </tr>
    <tr class="GridViewScrollItem">
        <td>747</td>
        <td>HL Mountain Frame - Black, 38</td>
        <td>FR-M94B-38</td>
        <td>375</td>
        <td>2.68</td>
        <td>739.0410</td>
        <td>1349.6000</td>
        <td>500</td>
        <td>7/1/2001 12:00:00 AM</td>
        <td>&nbsp;</td>
        <td>3/11/2004 10:01:36 AM</td>
    </tr>
</table>

CSS部分标题确定分配颜色

.GridViewScrollHeader TH,
.GridViewScrollHeader TD {
    padding: 10px;
    font-weight: normal;
    white-space: nowrap;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    background-color: cornflowerblue;
    color: palegoldenrod;
    text-align: left;
    vertical-align: bottom;
    cursor:default;
}

CSS部分TD级别的项目分配颜色和边框，并在触发事件TD：悬停时单元格改变颜色

.GridViewScrollItem TD {
    padding: 10px;
    white-space: nowrap;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    /*background-color: lemonchiffon;*/
    color: blue;
    background-color: gray;
    /*cursor: pointer;*/
}

/* this work and change color at cell level */
.GridViewScrollItem TD:hover {
     background-color: yellow;
    cursor: pointer;
}

CSS悬停在关卡行？在该行，TR级别不会触发悬停事件，好像没有指令，当然是我的错误，即使看起来是正确的TR。

/* this section not have effect 
- the cursor not change form
- the background color not change
*/
.GridViewScrollItem TR {
   background-color: #b8d1f3;    
}

.GridViewScrollItem TR:hover {
   /* background-color: #00C080FF; */
    background-color: yellow;
    cursor:pointer;
}

Answer 1

行颜色确实会改变，但在彩色TD下。因此，请将效果直接应用于列：

.GridViewScrollItem:hover TD {
   /* background-color: #00C080FF; */
    background-color: yellow;
    cursor:pointer;
}

另外，.GridViewScrollItem是你提到的实际TR，所以基本上你原来的CSS规则说：

tr tr:hover {};

工作代码集示例： https://codepen.io/robertspier/pen/LOjMNW

CSS悬停在关卡行

1 个答案: