jQuery菜单悬停 [英] jQuery menu hover

问题描述

我使用以下代码控制弹出式菜单。

  var timeouts = {}; 
 $（。item-wrapper）。hover（function（）{
 var rel = $（this）.attr（rel）; 
 var el = $（' '+ rel +'-tip'）; 
 if（timeouts [rel]）clearTimeout（timeouts [rel]）; 
 timeouts [rel] = setTimeout（function（）{el.fadeIn ）.show（）;}，50）; 
}，
 function（）{
 var rel = $（this）.attr（）; 
 var el = $（'＃'+ rel +'-tip'）; 
 if（timeouts [rel]）clearTimeout（timeouts [rel]）; 
 timeouts [rel] = setTimeout el.hide（）}，500）; 
}）; 
  

基本上会发生什么情况，当一个项目包装器图标悬停在它上面显示一个上下文工具提示子菜单。 / p>

但是，当您快速滚动菜单时，很多工具提示保持可见（因为它们需要500ms消失）。我想更改代码，以便只有当前的相对工具提示是可见的。

我认为这可以通过使用$（。tip）。hide

任何帮助。

解决方案

将类添加到活动提示。在显示下一个之前，获取活动类的大小并隐藏它

  var timeouts = {}; 
 $（。item-wrapper）。hover（function（）{
 var rel = $（this）.attr（rel）; 
 var el = $（' '+ rel +'-tip'）; 
 if（！el.hasClass（'active'）&& $（'。active'）。size（）> 0）
 $ '.active'）。removeClass（'active'）。hide（）; 
 el.addClass（'active'）; 
 if（timeouts [rel]）clearTimeout（timeouts [rel]）; 
 timeouts [rel] = setTimeout（function（）{el.fadeIn（fast）。show（）;}，50）; 
}，
 function var rel = $（this）.attr（rel）; 
 var el = $（'＃'+ rel +'-tip'）; 
 if（timeouts [rel]）clearTimeout [rel]）; 
 timeouts [rel] = setTimeout（function（）{el.hide（）}，500）; 
} 
  

I am using the following code to control a pop-up menu.

var timeouts = {};
$(".item-wrapper").hover(function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 50);
},
function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.hide() }, 500);
});

Essentially what happens is when an item-wrapper icon is hovered over it display a contextual tooltip submenu.

However, when you scroll over the menu very quickly numerous tooltips stay visible (as they take 500ms to disappear). I want to change the code so that only the current relative tooltip is visible.

I thought this could be achieved by using $(".tip").hide() somewhere but I'm not sure where to put it.

Any help appreciated.

解决方案

Add a class to active tip. Before showing the next, get the size of active class, and hide it

var timeouts = {};
$(".item-wrapper").hover(function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if(!el.hasClass('active') && $('.active').size() > 0)
    $('.active').removeClass('active').hide();
el.addClass('active');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.fadeIn("fast").show(); }, 50);
},
function() {
var rel = $(this).attr("rel");
var el = $('#' + rel + '-tip');
if (timeouts[rel]) clearTimeout(timeouts[rel]);
timeouts[rel] = setTimeout(function () { el.hide() }, 500);
});

这篇关于jQuery菜单悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！