.Net Gridview Restoring Alternating Color After Mouse

Question

I have a gridview with a set of alternatingRowStyle properties.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource2" OnRowDataBound="GridView1_RowDataBound"
        onselectedindexchanged="GridView1_SelectedIndexChanged" AlternatingRowStyle-BackColor="#f0f1f3">

I also want to highlight the lines when the cursor moves with this:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
{  
        if (e.Row.RowType == DataControlRowType.DataRow)  
        {  
            e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#ceedfc'");  
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");  
            e.Row.Attributes.Add("style", "cursor:pointer;");

The problem I am facing is that when the mouse moves over a line, it restores to white rather than the previous color, which differs in half the lines. I suggested that I could save the current color string before replacing it for each "onmouseove" event, but this seems expensive and alarming if quick mouse movement can ruin the situation.

I don't see the properties for gridview rows to tell me if this is an alternate row, but would a simple odd / even definition in rowindex be better?

Any best deals?

Thank.

Dan

Answer 1

. backgroundColor this.originalstyle.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
{  
        if (e.Row.RowType == DataControlRowType.DataRow)  
        {  
            e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#ceedfc'");  
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle");  
            e.Row.Attributes.Add("style", "cursor:pointer;");

Answer 2

CSS

tr.odd {
  background-color: White;
}
tr.even {
  background-color: #f8f8f8;
}
tr.odd:hover {
  background-color: #f3fcfa;
}
tr.even:hover {
  background-color: #ebf3f1;
}

Answer 3

Using jQuery:

$(document).ready(function ()
{
    var original = "";

    $("#<%=yourGridViewNameHere.ClientID%> tr:has(td)").hover(function ()
    {
        original = $(this).css("background-color");

        $(this).css("background-color", "Pink");
    }, function ()
    {
        $(this).css("background-color", original);
    });
});

The original answer I received from here , I changed it a bit for my needs, as shown above.

Enjoy