悬停效果产生闪烁

Posted 2023-03-06

【中文标题】悬停效果产生闪烁

【英文标题】：hover effect creates flickering

【发布时间】：2013-06-07 16:32:03

【问题描述】：

我试图在悬停时在图像上显示选项，但是当我悬停时显示的选项一直闪烁

      $('a').hover(function(event) 
        var href = $(this).attr('href');
        var top = $(this).next().css("bottom");

            $(this).next().css("display", "block");
            $(this).next().next().css( 'top': '30px', 'display': 'block' );

    ,function() 
            $(this).next().hide();
            $(this).next().next().hide();

    );

);
$('.SelectionAnimate').hover(function()  $(this).css("display", "block"); $(this).next().show(); );

列表视图代码

           <ItemTemplate>
            <div style="float: left; position: relative; margin: 10px;" >
                <div>
                    <a class="real" href='<%#"/ProfileTenModified/UserProfile/PhotoCross.aspx?in="+ Eval("Full_Image_Name") +"&mi=" + Eval("User_Id") +"&fd="+ Eval("Album")%>'>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%#"/ProfileTenModified/setP/"+ Eval("Slide_Thumb_Name") +".JPEG" %>'
                            BorderStyle="Solid" BorderWidth="1px" Width="172px" Height="172px" />
                    </a>
                    <asp:LinkButton CssClass="SelectionAnimate" ID="Selection" runat="server" Text="Set as Display"
                        OnCommand="ListViewThums_Selection_Command" CommandName="selection"></asp:LinkButton>
                    <asp:LinkButton CssClass="SelectionAnimate" ID="Deletion" runat="server" Text="Remove"
                        OnCommand="ListViewThumbs_Command"></asp:LinkButton>
                </div>
                <asp:HiddenField ID="HiddenFieldImageId" runat="server" Value='<%#Eval("Id") %>' />
            </div>
        </ItemTemplate>

我同时使用了mouseenter 和hover 都产生了相同的效果。有没有办法解决这个问题

【问题讨论】：

为什么是javascript？一个简单的悬停应该很容易，只需 css...

【参考方案1】：

您仅在a 上应用.hover()。因此，当您悬停a 时，图像会出现悬停在您的a 上，这意味着您不再悬停a。这将触发.hover() 的第二次回调并且图像将消失。然后你再次悬停a，它会无限重复。

要解决这个问题，您只需在父容器或两个元素上绑定.hover()。

【讨论】：

我添加了类 real 但没有使用它。我想我应该包括 .real ??

不，这不能解决你的问题，因为.real 是a。不过你可以试试$('.real').parent().hover(your code)

因为被悬停的是a的兄弟姐妹。理论上，在a 的父级上应用.hover() 将停止闪烁。没有一个活生生的例子很难提供帮助......

其实在parent上绑定.hover()会报错，因为this和之前的不一样了...

检查这个小提琴：jsfiddle.net/4LzaU/1。由于它很轻，你看不到它发生（它太快了），但你可以看到光标很疯狂。据我了解，这是你的问题。但是如果你把它应用到父级上，它就会停止闪烁：jsfiddle.net/4LzaU/2

【参考方案2】：

我曾经遇到过与您类似的问题。 所以，为了解决这个问题，我使用了 mouseenter 和 mouseleave 事件。

$(selector).on('mouseenter', function()
  //perform what you want whe mouse is on your selector
).on('mouseleave', function()
  //your code on when mouse leaves the selector
);

【讨论】：

如果我使用$(selector).parent().on('mouseenter', function()); 可以吗

不，这不起作用，但如果你说 $('a').hover 给你所需的结果并且它闪烁，那么 $('a').on('mouseenter' 应该工作。如果仍然存在问题而不是将整个东西放在一个 div 中，请将一个类设置为 div 并在该类上的 mouseenter 事件上