[英]hover effect creates flickering
我試圖在懸停時在圖像上顯示選項,但是當我懸停時,顯示的選項一直閃爍
$('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
都可以產生相同的效果。 有沒有解決的辦法
您應用.hover()
上的a
而已。 所以,當你徘徊在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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.