GridView Row Highlighting on Mouseover

spgv.RowCreated += new GridViewRowEventHandler(spgv_RowCreated);


void spgv_RowCreated(object sender, GridViewRowEventArgs e)
        {
            // only apply changes if its DataRow
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                // when mouse is over the row, save original color to new attribute, and change it to highlight yellow color
                e.Row.Attributes.Add("onmouseover",
              "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#EEEEEE';this.style.cursor='pointer'");


                // when mouse leaves the row, change the bg color to its original value   
                e.Row.Attributes.Add("onmouseout",
                "this.style.backgroundColor=this.originalstyle;this.style.cursor='default'");
                 
                // on click row, go to item detail
                e.Row.Attributes.Add("onclick", "javascript:location.href='" + ((DataRowView)e.Row.DataItem).Row.ItemArray.GetValue(6) + "'");
            }
        }

onmouseout event doesn't work well with Div and timers

I am trying to keep my div visible while my cursor is still within the div area, and making it invisible again (after a short while) when the cursor moves out of the area.

This would not work:

<div id="menu1"style="display:none;" onmouseout="delayhide_menu(this.id); >

Because for some strange reason, the onmouseout event acts like the onmousemove event. The timer (in the hide_menu function) gets activated when the mouse moves (even though my cursor is still within the div area) and thus my div becomes invisible after a while.

The solution:

<div id="menu1" style="display:none;" onmouseout="delayhide_menu(this.id); onmouseover="display_menu(this.id);">

You need to define a onmouseover event to counter the activation of the onmouseout event whenever the mouse moves within the div. In addition, you need to add more lines of code in the display and hide menu functions concerning the timers.

<script type="text/javascript">

var popupTimerHandle = null;

function display_menu(id) {

var menu_element = document.getElementById(id);

menu_element.style.display = "block";

if (popupTimerHandle != null) {

clearTimeout(popupTimerHandle);

popupTimerHandle = null;

}

}

function hide_menu(id) {

var menu_element = document.getElementById(named);

menu_element.style.display = "none";

}

function delayhide_menu(id) {

popupTimerHandle = setTimeout("hide_menu('" + named + "')", 1500);

}

</script ">