Question

I am trying to show a div when hovering over the first row of a table. This results in flickering. How can I fix it?

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="hovermouse._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">


        $(document).ready(


function () {

    $("table tr:first").hover(function () {
        $("#mydiv").show()
    },
            function () {
                $("#mydiv").hide();
            }
            );
}
        );
    </script>

    <div id="mydiv">
        you can see me</div>

    <table border="true">
        <tr>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
        </tr>
        <tr>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
        </tr>
        <tr>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
            <td>
                hi
            </td>
        </tr>
    </table>
</asp:Content>

Answer 1

Which browser? It will logically flicker because when you show the new <div> it will displace the <tr> being hovered over and the <tr> will no longer be hovered, resulting in an infinite loop. A lot of browsers don’t do this, they only apply hover effects when the mouse moves, but the mouse can still move a small amount and cause the flickering.

The best thing to do here is to not do that. Ask yourself a few questions:

1. Should the <div> actually be hidden when the user mouses off of the <tr>?
2. What is the actual point of this code? What do you want to accomplish by this?
3. Should the <div> actually displace the <tr>, or have you applied a stylesheet to override that? If you haven’t and this is what you mean to do, do so.

Here’s the test case I put together from what you posted: http://jsfiddle.net/YKCA5/

If you can provide a more complete example (e.g. applicable styles & other scripts) please do.