将鼠标悬停在元素上的jQuery仍然保留了悬停类。当鼠标悬停时,应删除此类样式
当鼠标悬停在.login-content上时,我希望login-btn保持其悬停状态。我已经尝试过,现在它显示并隐藏悬停的div,但login-btn在悬停时忽略悬停状态,而悬停时.login-content消失。将鼠标悬停在元素上的jQuery仍然保留了悬停类。当鼠标悬停时,应删除此类样式
更新:
目前的问题是,如果鼠标悬停在登录后直接关徘徊..而不是悬停在子元素中,.hovered风格保持。这不应该是这样。
的HTML如下:
<li><a href="#" class="login-btn">Login</a>
<div class="login-content">
<form name="login-form" action="" method="post">
<input type="email" name="email" value="" placeholder="E-mail" />
<input type="password" name="password" value="" placeholder="Password" />
<input type="submit" name="login" value="Login" class="form-login" />
</form>
</div>
</li>
jQuery的代码如下:
$(document).ready(function() {
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(this).data('hoverTimeoutId', setTimeout(function() {
$(this).removeClass('hovered');
$(".login-content").hide();
} ,500));
});
$('.login-content').hover(
function(){
clearTimeout($(".login-btn").data('hoverTimeoutId'));
},
function(){
$(".login-content").hide();
$(".login-btn").removeClass('hovered');
});
});
该网页也可以在http://www.domainandseo.com/portfolio/1may/index.html发现是否需要任何进一步的调试。
感谢
尝试
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(this).data('hoverTimeoutId', setTimeout(function() {
$(".login-content").hide();
$(this).removeClass('hovered');
} ,500));
});
$('.login-content').hover(
function(){
clearTimeout($(".login-btn").data('hoverTimeoutId'));
},
function(){
$(".login-content").hide();
$(".login-btn").removeClass('hovered');
});
而不是使用:hover
psedoclass的使用像hover
类分配悬停STA在演示显示TE到 login-btn
演示:Fiddle
这很不错。在问题中提到的另一件事是,我想要做的是,当.hover-content被徘徊[或可见]时,.login-btn应该处于其悬停状态..有黑色背景并且增强高度。任何方式来做到这一点?再次感谢Arun。 – 2013-05-01 01:55:27
@AlexZahir查看更新 – 2013-05-01 02:10:55
@AlexZahir您需要将css规则'.login-btn:hover'更改为'a.login-btn.hovered' – 2013-05-01 02:30:07
使用setTimeout
$(".login-btn").hover(
function() {
clearTimeout($(this).data('animator'));
$(this).data('animator', setTimeout(function() {
$(".login-content").show();
} ,1000));
},
function() {
clearTimeout($(this).data('animator'));
$(this).data('animator', setTimeout(function() {
$(".login-content").hide();
} ,1000));
});
这太好了。但问题的第二部分呢?一旦我将鼠标从登录按钮上移开,表单就会消失,并且登录按钮失去悬停。我尝试使用可以在问题中给出的代码中看到的addclass,但它不起作用。 – 2013-05-01 01:12:23
@AlexZahir如果'.hover'类不存在,只需触发隐藏就可以做到这一点:http://jsfiddle.net/uDm64/1/ – 2013-05-01 01:15:13
这段代码导致一些小问题,例如头部的任何部分被徘徊,.login内容显示出来。此外,当鼠标移开时,即使在降低超时时间后,它也不会隐藏或隐藏很长时间。另一个重要的事情是,当.login-content处于悬停状态时,.login-btn的悬停状态不会打开。 – 2013-05-01 01:23:05
如果你不想操心具有光标离开了一会儿用户,那么我建议多一点状态检查。
另外,如果你希望你的按钮出现徘徊,在你的CSS选择器 '的.login-BTN:悬停',将其更改为: '的.login-BTN:悬停和.login-btn.hover'
小提琴:http://jsfiddle.net/qhAus/
(function() {
var timer = 0,
open = false,
loginBtn = $('.login-btn'),
loginContent = $('.login-content'),
startTimeout = function(state, duration) {
timer = setTimeout(function() {
timer = 0;
loginContent[state]();
open = state === 'show';
if(!open) {
// If it's closed, remove hover class
loginBtn.removeClass('hover');
}
}, duration || 1000);
};
loginBtn.hover(function(e) {
$(this).addClass('hover');
if(open && timer) {
// If about to close but starts to hover again
clearTimeout(timer);
}
if(!(open || timer)) {
// Don't start to open again if already in the process
startTimeout('show');
}
}, function() {
// When not hovering anymore, hide login content
startTimeout('hide', 2000);
});
loginContent.mousemove(function(e) {
// If cursor focus on the login content, stop any closing timers
if(timer) {
clearTimeout(timer);
}
});
loginContent.mouseleave(function(e) {
// When cursor leaves login content, hide it after delay
startTimeout('hide');
});
})();
你想*褪色*它或者只是有它在1秒后弹出? – 2013-05-01 00:55:37
刚刚在1秒后弹出,并在1秒后消失。 – 2013-05-01 01:03:00