javascript - 在网格 View 的Itemtemplate内的控件上应用悬停样式

我想更改GridView上mousehover行的背景颜色。但是，它对于<boundfield>列工作正常，但是lables内<itemtemplate>内MouseHover的背景色不会改变。

我的Gridview看起来像这样：

<asp:GridView ID="gvStudentTraining" runat="server" AutoGenerateColumns="False" Width="100%" ShowFooter="true" CssClass="mydatagrid" HeaderStyle-CssClass="header" PagerStyle-CssClass="pager" RowStyle-CssClass="rows" OnPageIndexChanging="gvStudentTraining_PageIndexChanging" OnRowDataBound="gvStudentTraining_RowDataBound">
    <Columns>

        <asp:BoundField DataField="TS_TrainingLocation" HeaderText="University" SortExpression="University">
            <HeaderStyle HorizontalAlign="Center" Wrap="false" />
            <ItemStyle HorizontalAlign="Center" />
        </asp:BoundField>

        <asp:BoundField DataField="TS_TrainingName" HeaderText="Training Name" SortExpression="Training Name">
            <HeaderStyle HorizontalAlign="Center" Wrap="false" />
            <ItemStyle HorizontalAlign="Center" Wrap="false" />
        </asp:BoundField>

        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label CssClass="rownumber" ID="Total" Text='<%#Eval("Total")%>' runat="server" />
            </ItemTemplate>
            <HeaderStyle Wrap="false" />
            <ItemStyle HorizontalAlign="Center" Wrap="False" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我的rows和hover的CSS样式如下所示：
 

<style>
    .rows {
        background-color: #fff;
        font-family: Arial;
        font-size: 14px;
        color: #000;
        min-height: 25px;
        text-align: left;
    }

        .rows:hover td {
            background-color: #5badff;
            color: #fff;
        }

    .rownumber:hover {
        background-color: #5badff;
        color: #fff;
    }

    .mydatagrid a /** FOR THE PAGING ICONS **/ {
        background-color: Transparent;
        padding: 5px 5px 5px 5px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

        .mydatagrid a:hover /** FOR THE PAGING ICONS HOVER STYLES**/ {
            background-color: #000;
            color: #fff;
        }

    .pager span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
        background-color: #fff;
        color: #000;
        padding: 5px 5px 5px 5px;
    }
</style>

我尝试了许多解决方案，但没有成功，包括以下内容：

protected void gvStudentTraining_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string onmouseoverStyle = "this.style.backgroundColor='#5badff'";
        string onmouseoutStyle = "this.style.backgroundColor='white'";
        if (e.Row.HasControls())
        {
            Label temp = (Label)e.Row.FindControl("lblTotal");
            temp.Attributes.Add("onmouseover", onmouseoverStyle);
            temp.Attributes.Add("onmouseout", onmouseoutStyle);
        }
    }
}

关于如何在将鼠标悬停在该行上时更改该行的background-color，包括labels内的<itemtemplate>的任何想法。
先感谢您。

最佳答案

您的问题是用于分页的'.mydatagrid span'。但是Label控件也会渲染span元素，因此您也要设置该样式。

这样吧

.pager span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
    background-color: #fff;
    color: #000;
    padding: 5px 5px 5px 5px;
 }

或者从Label更改为Literal也可以。