在GridView的ItemTemplate内部的控件上应用悬停样式

Question

我想在 mousehover上更改GridView行的背景颜色。但是，它适用于<boundfield>列，但是<itemtemplate>内lables的背景颜色不会在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>。先感谢您。

Answer 1

您的问题是您用于分页的'.mydatagrid span。但是标签控件也将渲染一个跨度元素，因此您还设置了该样式。

所以也是如此

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

或从标签更改为文字也将起作用。