我试图在悬停时在图像上显示选项,但是当我悬停时,显示的选项一直在闪烁
$('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
上,它会无限重复。
要解决这个问题,您只需在父容器或两个元素上绑定(bind) .hover()
。
关于javascript - 悬停效果会产生闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17050650/