Question

当我将鼠标悬停在表格的第一行时，我试图显示一个div。这导致闪烁。我该如何解决？

    <%@ 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

哪个浏览器？它会在逻辑上闪烁，因为当您显示新的<div>时，它会取代正在悬停的<tr>并且<tr>将不再悬停，从而导致无限循环。许多浏览器不这样做，它们只在鼠标移动时应用悬停效果，但鼠标仍然可以移动少量并导致闪烁。

这里最好的办法就是不要这样做。问自己几个问题：

当用户将鼠标移离<div>时，<tr>是否真的被隐藏？
此代码的实际含义是什么？你想通过这个来完成什么？
<div>实际取代 <tr>，或者您是否应用了样式表来覆盖它？如果你没有，这就是你的意思，那就这样做。

以下是我发布的测试用例：http://jsfiddle.net/YKCA5/

如果您可以提供更完整的示例（例如适用的样式和其他脚本），请执行。

jQuery悬停功能导致闪烁

1 个答案: