悬停效果产生闪烁

hover effect creates flickering

本文关键字：闪烁 悬停      更新时间：2023-09-26

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

      $('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(); });

listview代码

           <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都创建相同的效果。有没有办法解决这个问题

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

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

我曾经遇到过和你类似的问题。因此，为了解决这个问题，我使用了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
});
相关文章：