javascript - 在 gridview 的 Itemtemplate 内的控件上应用悬停样式

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>

和我的一些 CSS 样式 rows和 hover看起来像这样:

<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”。但是 Label 控件也会呈现 span 元素，因此您也设置了该样式。

那就这样吧

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

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