悬停效果产生闪烁 [英] hover effect creates flickering
问题描述
我想显示悬停在图像上的选择,但是当我悬停显示的选项保持闪烁
I am trying to display options on an image on hover but when I hover the displayed options keeps 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(); });
在ListView code
the listview code
<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
和悬停
都产生相同的效果。有没有去解决这个问题。
I used both the mouseenter
and hover
both create the same effect. is there away to solve this
推荐答案
您适用 .hover()
在 A
而已。所以,当你徘徊在 A
,图像显示悬停你的 A
至极意味着你不悬停 A
了。这将触发的第二个回调.hover()
和图像将消失。再说你悬停 A
,它infinitly重复。
You apply .hover()
on the a
only. So when you hover the a
, the image appear hover your a
wich mean you are not hover the a
anymore. That will fire the second callback of .hover()
and the image will disappear. Then again you are hover the a
and it repeat infinitly.
要解决这个问题,你只需要绑定 .hover()
父容器或两个元素。
To solve that, you just have to bind the .hover()
on the parent container or on both elements.
这篇关于悬停效果产生闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!