In GridView MouseOver Event Get Another Information based on gridview(StateName with City Name)

Design Page

css

<style type="text/css">
        body 
        {
            font-family:Arial, Tahoma;
            font-size:15px;
        }
        .grid 
        {
            width:100%;
            font:inherit;
            background-color:#FFF;
            border:solid 1px #525252;
        }
        .grid td
        {
            font:inherit;
            padding:3px 5px;
            border:solid 1px #C1C1C1;
            color:#333;
            text-align:left;
        }
        .grid th 
        {
            padding:3px;
            color:#FFF;
            background:#424242;
            border-left:solid 1px #525252;
            font:inherit;
            text-align:center;
            text-transform:uppercase;
        }       
        h3
        {
            color:#000;
            text-decoration:underline;
        }
        #divDetail 
        {
            float:left;
            font:inherit;
            font-size:13px;
            padding:2px 5px;
            width:auto;
            border:solid 2px #CCC;
            -moz-border-radius:0 7px 7px 0; -webkit-border-radius:0 7px 7px 0;
            border-radius:0 7px 7px 0;
            display:none;
            color:#333;
        }
        #divDetail p {
            font:inherit;
        }
        #divDetail a 
        {
            font:inherit;
            float:right;
            background-color:#357AE8;
            color:#FFF;
            text-decoration:none;
            border:solid 1px #2F5BB7;
            border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;
            padding:3px;
        }
    </style>


Script

<script type="text/javascript">       
        var iRowIndex;    // THE ROW INDEX OF THE GRIDVIEW, TO KEEP THE ROW HIGHLIGHTING
                    // WHEN THE MOUSE IS ON ANOTHER CONTROL.

        function MouseEvents(objRef, evt, desc) {

            if (evt.type == "mouseover") {

                objRef.style.cursor = 'pointer'
                objRef.style.backgroundColor = "#EEE";
                ShowDiv(desc, evt.pageY);

            }
            else {

                objRef.style.backgroundColor = "#FFF";
                iRowIndex = objRef.rowIndex;
                HideDiv();

            }
        }
        function ShowDiv(desc, pos) {

            // SHOW THE DIV WITH DESCRIPTIONS NEXT TO THE SELECTED GRIDVIEW ROW.

            document.getElementById('divDetail').style.display = 'block';
            document.getElementById('divDetail').innerHTML = desc;
            document.getElementById('divDetail').style.marginTop = pos - 25 + 'px';
        }

        function HideDiv() { document.getElementById('divDetail').style.display = 'none'; }

        function highlight(objRef, evt) {
            if (evt.type == "mouseover") {
                objRef.style.display = 'block';
                document.getElementById('gvEmployee').rows[iRowIndex].style.backgroundColor = "#EEE";
            }
            else {
                if (evt.type == "mouseout") {
                    document.getElementById('gvEmployee').rows[iRowIndex].style.backgroundColor = "#FFF";
                    objRef.style.display = 'none';
                }
            }
        }
    </script>


Design 
<div id="divGrid" style="width:auto; float:left">

            <h3>LIST OF EMPLOYEES</h3>
           
            <%--THE DATABOUND GRIDVIEW CONTROL.--%>
            <asp:GridView ID="gvEmployee" AutoGenerateColumns="False" OnRowDataBound ="gvEmployee_RowDataBound"
                CssClass="grid" GridLines="None"
                cellpadding="3" runat="server">

                <Columns>
                    <asp:BoundField DataField="StateId" HeaderText="Code" />
                    <asp:BoundField DataField="StateName" HeaderText="Name" />
                </Columns>

                <HeaderStyle BackColor="Black" ForeColor="white" />

            </asp:GridView>
        </div>
       
        <%--THE FLOATING DIV TO SHOW EMPLOYEE DETAILS.--%>
        <div runat="server" id="divDetail" onmouseover="highlight(this, event)"
            onmouseout="highlight(this, event)"></div>


Code Page

protected void Page_Load(object sender, EventArgs e)
        {
            string constr = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;           
            SqlConnection con = new SqlConnection(constr);
            SqlDataAdapter da = new SqlDataAdapter("select StateId, StateName from StateMaster", con);
            DataTable dt = new DataTable();
            da.Fill(dt);

            gvEmployee.DataSource = dt;
            gvEmployee.DataBind();
        }


        protected void gvEmployee_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
        {
            // BIND DATA WITH EACH ROW.
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                String sDetails = System.String.Empty;
                sDetails = "<span><h3>OTHER DETAILS</h3></span>";

                string constr = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    using (SqlCommand cmd = new SqlCommand("select * from CityMaster WHERE StateId = " +
                            DataBinder.Eval(e.Row.DataItem, "StateId").ToString()))
                    {
                        SqlDataAdapter sda = new SqlDataAdapter();
                        try
                        {
                            cmd.Connection = con;
                            con.Open();
                            sda.SelectCommand = cmd;

                            DataTable dt = new DataTable();
                            sda.Fill(dt);

                            if (dt.Rows.Count > 0)
                            {
                                sDetails = sDetails + "<p><strong>City Code: </strong>" +
                                    dt.Rows[0]["CityCode"] + "</p>";
                                sDetails = sDetails + "<p><strong>City Name: </strong>" +
                                    dt.Rows[0]["CityName"] + "</p>";

                                // BIND MOUSE EVENT (TO CALL JAVASCRIPT FUNCTION), WITH EACH ROW OF THE GRID.
                                e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event, '" + sDetails + "')");
                                e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event, '" +
                                    DataBinder.Eval(e.Row.DataItem, "StateId").ToString() + "')");
                            }

                        }
                        catch (Exception ex)
                        {
                        }
                    }
                }
            }
        }


OUTPUT