jQuery悬停具有不同事件的两个div
jQuery悬停具有不同事件的两个div
提问于 2014-09-18 08:43:43
我创建了一个显示当前天气的div和显示5天天气预报的弹出div。
这是我的jQuery代码：
$('.weather-popup').hide();
$('.weather-current,.weather-popup').click(function(event){
$('.weather-popup').toggle(400);
event.stopPropagation();
});
$("html").click(function() {
$(".weather-popup").hide(300);
}); .天气-当前是显示当前天气的div，而天气弹出则显示5天的天气预报。
对于.click()函数，它工作得很好，但是如何使用.hover()函数来完成这个任务呢？
首先，我试过这样做：
$(".weather-current").hover(function(){
$('.weather-popup').stop().show(500);
}, function(){
$('.weather-popup').stop().hide(500);
});当我在..current天气上悬停时，天气弹出弹出是正确的，但是当我在. When弹出窗口上悬停时，div当然会隐藏起来。
我如何设置这个组合，当我悬停在。天气-流，.天气弹出将显示，然后当我悬停在.天气-流，这个div将保持打开？
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-18 08:46:08
您可以使用计时器来隐藏weather-current鼠标保存上的弹出。
jQuery(function ($) {
$(".weather-current").hover(function () {
var $target = $('.weather-popup');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function () {
var $target = $('.weather-popup');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$('.weather-popup').hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});.weather-popup {
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="weather-current">weather-current</div>
<div class="weather-popup">weather-popup</div>
Stack Overflow用户
发布于 2014-09-18 08:46:11
这很可能发生，因为在HTML中，div.weather-popup不是div.weather-current的子代。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25908035
复制相关文章
相似问题
腾讯云开发者
