Javascript 悬停效果创建闪烁

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

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

---

为什么使用javascript？一个简单的悬停应该很容易，只要css…我添加了类真实，但没有使用它。。我想我应该包括.real？？不，那不能解决你的问题，因为

。real

是

a

。但是您可以尝试

$（'.real'）.parent（）.hover（您的代码）

，因为将悬停的是

a

的兄弟姐妹。理论上，在

a

的父对象上应用

.hover（）

，将停止闪烁。没有一个实例就很难提供帮助…实际上，在父对象上绑定

.hover（）

会导致错误，因为

此

将与以前不同…请检查此小提琴：。因为它很轻，你看不到它发生（它太快了），但你可以看到光标疯狂。据我所知，这是你的问题。但是如果您将其应用于父级，它将停止闪烁：如果我使用

$（selector）.parent（）.on（'mouseenter'，function（）{}）这样行吗不行，但如果你说$（'a'）。hover给你所需的结果，它会闪烁，那么$（'a'）。on（'mouseenter'应该行。如果仍然存在问题，而不是将整个内容放入div，则将一个类设置为div，并在该类上设置一个mouseenter事件