在网格视图的Itemtemplate内的控件上应用悬停样式

时间:2017-11-22 12:42:30

标签: javascript css asp.net gridview

我想更改TextBox.TextGridView行的背景颜色。但是,它适用于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的一些CSS样式如下所示:  

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。 先感谢您。

1 个答案:

答案 0 :(得分:0)

您的问题是您用于分页的&#39; .mydatagrid span`。但是Label Control也会渲染一个span元素,所以你也要设置那个样式。

这样做

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

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