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> 

및 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; 
} 

을하거나 또한 작동 리터럴에 Label에서 변경합니다.