Hover样式在网格视图内部控件中的应用

Question

我想更改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，包括在行上悬停的鼠标上的<itemtemplate>中的labels。提前谢谢你。

Answer 1

您的问题是用于分页的'.mydatagrid span`‘。但是Label控件也会呈现一个span元素，因此您也在设置该样式。

所以做这个

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

或者将标签更改为文字也会有效。