我正在使用一些 jQuery 来创建渐变翻转效果,但在执行单击和拖动后我遇到了按钮行为的问题。
<div id="splash_buttons">
<a id="our_projects_button" href="#work">
Our Projects
<div class="normal"></div>
<div class="hover"></div>
</a>
</div>
有两个不同的 div 淡入和淡出以创建悬停淡入淡出效果。效果非常好,除了当您单击、拖动、释放、鼠标输入然后再次鼠标离开时,悬停状态不会消失。单击时,将显示事件状态。它将在拖动期间保持不变,直到松开鼠标按钮。然后它将恢复到悬停状态并最终淡化回到正常状态。之后,如果您将鼠标悬停在按钮上,它将按预期激活悬停状态,但在离开按钮时不会停止悬停状态,除非您再次上下单击按钮。
$('#splash_buttons a, #work_buttons a').live('mouseenter', function() {
$(this).find('.hover').fadeIn(hoverFadeTime);
}).live('mouseleave', function() {
if(!isMouseDown) {
$(this).find('.hover').stop().fadeOut(hoverFadeTime);
}
}).live('mousedown',function() {
isMouseDown = true;
$(this).find('.normal').hide();
}).live('mouseup', function() {
isMouseDown = false;
$(this).find('.normal').show();
$(this).find('.hover').stop().fadeOut(hoverFadeTime);
}).on('dragend', function() {
$(this).find('.normal').show();
$(this).find('.hover').stop().fadeOut(hoverFadeTime);
});
我不确定这是否与正常和悬停状态由 jQuery 处理而事件状态只是一个 css 规则这一事实有关。有人能帮忙吗?谢谢!
#our_projects_button {
float: left;
position: relative;
left: -6px;
width: 173px;
height: 53px;
margin: 0 20px 0 0;
text-indent: -9999px;
}
#our_projects_button .normal {
position: absolute;
top: 0;
left: 0;
width: 173px;
height: 53px;
background: url('img/our_projects_sprite.png') transparent 0 0 no-repeat;
}
#our_projects_button .hover {
display: none;
position: absolute;
top: 0;
left: 0;
width: 173px;
height: 53px;
background: url('img/our_projects_sprite.png') transparent 0 -53px no-repeat;
}
#our_projects_button .hover:active { background-position: 0 -106px; }
最佳答案
如果您将 dragend 代码更改为
.on('dragend', function() {
$(this).find('.normal').show();
$(this).find('.hover').stop().fadeOut(hoverFadeTime);
isMouseDown = false;
});
关于jquery - 在 jQuery 中拖动后,mouseleave 处理程序停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13315858/