ASP.NET DataList - Row Background Color Change When MouseOver

Question

I am trying to make the row background color change when moseover, but I could not make it work. I am not sure I use OnItemDataBound is correct or my codebehind is incorrect.

Please help. Thanks!

<asp:DataList BackColor="#ffffff" id="DataList1" DataSourceID="dsCompanyListPartialMatch"  runat="server" Width="80%" DataKeyField="Company1Word"
    UseAccessibleHeader="true"
    CssClass="books"
    HeaderStyle-CssClass="header"
    ItemStyle-CssClass="item"
    AlternatingItemStyle-CssClass="alternating" 
    GridLines="Both"
    CellPadding="0"
    CellSpacing="0" BorderColor="Black"
    ItemStyle-BorderColor="Black" BorderWidth="0"
     HorizontalAlign="Center"
    RepeatDirection="Vertical" 
    OnItemDataBound="DataList1_ItemDataBound"
    >                
    <HeaderTemplate>
    </HeaderTemplate>

    <ItemStyle BorderColor="black" Font-Size="Medium" /> 
    <ItemTemplate>
        <table border="0">
        <tr>
            <td style="width: 50px; border-right:1px solid black; border-spacing:0;  text-align:center; ">        
            <asp:LinkButton>
                <asp:LinkButton ID="LinkButton2" runat="server" Text="+" CommandArgument='<%#Container.ItemIndex%>'
                OnCommand="LinkButton1_Command"  
                Font-Underline="false"       
                Height="25"      
                Font-Bold="true"                  
                ></asp:LinkButton>
            </td>
              <td style="width: 50px; border-right:1px solid black; border-spacing:0;"><%#Eval("Row")%></td>
              <td style="width: 800px"><asp:Literal ID="litFoo" runat="server" Text='<%#Eval("Company")%>' /> </td>
             <td style="width: 600px; text-align:right;">
                <asp:CheckBox  id="check1" runat="server" />
            </td>
            <asp:Label ID="lblRow" Visible="False" runat="Server" Text='<%# DataBinder.Eval(Container.DataItem, "Row") %>' />
        </tr>    
        </table>     

              <asp:Panel ID="pnlChildView" runat="server" style="padding-left:200px;">
                <asp:DataList ID="childList" runat="server" Width="100%">
                   <ItemTemplate>
                        <table class="table1" border="1">
                       <tr>
                          <td style="width: 800px; border-right:0px solid black; border-spacing:0;">&#8226; <%#Eval("CompanyName")%></td>
                           <td style="text-align:right; "><a href="/Apps/ERP/Other/CompanyInfo.asp?CompanyID=<%#Eval("CompanyID")%>" ><%#Eval("CompanyID")%></a></td>                      
                       </tr>
                        </table>
                   </ItemTemplate>
               </asp:DataList>
           </asp:Panel>
    </ItemTemplate>
     <FooterTemplate>
    </FooterTemplate>                
</asp:DataList>

Code behind

protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item)
    {

        e.Item.Attributes.Add("onmouseover", "this.className='BGMouseOver'");

        e.Item.Attributes.Add("onmouseout", "this.className='BGMouseOut'");

    }
}

Answer 1

Try jQuery mouseover() Method

Click here

Answer 2

I suggest CSS. You can find the idea here: div background color, to change onhover

Add CSS to the top:

<style type="text/css">
    .div_hover:hover { background-color: #000000; } <-- this is where you set your hover color
</style>

Basically, wrap everything in your ItemTemplate in a div, like so:

<ItemTemplate>    
    <div class="div_hover">
        [ItemTemplate stuff...]
    </div>
</ItemTemplate>