グリッドビューの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> 

と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>の中のホバリングマウスでその行にどのように変更できますか。 ありがとうございます。

Answer 1

問題は、ページングに使用する '.mydatagrid span'です。しかし、Label Controlはspan要素をレンダリングし、そのスタイルも設定します。

のでラベルからリテラルにこの

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

または変更を行うことも動作します。