悬停影响只有1项

嗨，大家好我想知道是否有徘徊与被并排放置和行动会触发在离开元件的面积相同的类名的几个要素的方式多个元素。例如：悬停影响只有1项

<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div> 
<div class="hoverme"></div>

下面的“unhover”javascript应该只在他们离开“hoverme”类的整个区域时被调用。

$('.hoverme').live('mouseover mouseout', function(event) { 
      if (event.type == 'mouseover') { 

       if(!$("#stage1 td").hasClass("hover")) 
       { 
        $("#stage1 td").addClass("hover",200) 
       } 
      } 
      else { 

       //$("#stage1 td").removeClass("hover",200) 

      } 
     });

有没有一种方法来执行此操作？

编辑：忘了提及div的形状不只是纯正的方形。它由几个方块组成，但最终形状很奇怪。所以我不能用另一个父div来包装我的div。

我使用jQuery用户界面，因此我能够addclass并与第二个参数

来源

2012-07-04 lilsizzo

你能告诉我们在哪里＃stage1的TD？ –

为什么你将第二个参数传递给.addClass（）？它只需要一个参数，一个字符串或一个函数。 – Ian

@JeffRobertDagala err我会说＃stage1 td是我担心的最不重要的事情。它是使td背景变成彩色的。 ianpgall：我使用jqueryui因此我能够使用第二个参数。编辑帖子提到，现在 – lilsizzo

它似乎是以前的答案的组合。

使用mouseenter和mouseleave而不是mouseover和mouseout。
其次，你可以使用包装div，这就是我的工作原理。如果你徘徊在一个子div上，那么你也会徘徊在其父母身上，而不管父母在哪儿。父div上的mouseleave事件不会触发，直到您不再徘徊在任何孩子身上。

我试着用绝对定位成十字形的五岁以下儿童的div创建零大小包装的div，我相信它的作品，你说你需要它的方式。经过Firefox和Chrome测试。

$('.hoverme-wrapper').on('mouseenter mouseleave', function(e) { 
    if (e.type === 'mouseenter') { 
    if(!$("#stage1 td").hasClass("hover")) 
     $("#stage1 td").addClass("hover", 200) 
    } else { 
    $("#stage1 td").removeClass("hover", 200); 
    }

[编辑，以确认我对jQuery UI的addClass执行测试]

来源

2012-07-04 04:19:39

它工作，因为你只是在做addClass（“悬停”）如果你碰巧正确地阅读帖子，我有另一个参数addClass（“悬停”，200）。一旦mouseleaves，它仍然可以看到stage1 td – lilsizzo

的不同状态我将jQuery UI集成到我的测试中，它仍然正常工作。你能提供你得到的错误更清楚的信息吗？发布一些示例css？这可能是你的定位方法，这是你的错误。 –

我得到它的工作。也许我误解了或早些时候。谢谢！！ – lilsizzo

试试这个removeclass：live()已被弃用，你可以使用on()方法：

$('.hoverme').on('mouseover', function(event) { 
    $("#stage1 td").addClass("hover") 
}).on('mouseout', function() { 
    $("#stage1 td").removeClass("hover") 
})

http://jsfiddle.net/jUmTt/

来源

2012-07-04 03:19:41 undefined

在这种形式下，'.on（）'不是'.live（）'替换;然而只要这段代码处于文档就绪函数中，并且“hoverme”-classed元素不被销毁和替换，它就可以工作！ –

像我已编辑的帖子...尝试添加另一个参数添加类和删除类 – lilsizzo

待办事项你的意思是每当他们悬停在任何元素上时，他们都会接受hover课程？试试这个：

var elements = $('.hoverme'); 
elements.on('hover', function(event) { 
    event.type == 'mouseover' ? elements.addClass('hover') : elements.removeClass('hover'); 
});

或者，你可以调整你的HTML来包装悬停能力要素，即：

<div class="hoverWrap"> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
    <div class="hoverme"></div> 
</div>

，然后装上悬停事件侦听器hoverWrap。在语义上这更有意义;仅仅因为元素在标记中彼此接近并不意味着它们应该被视为一个大元素。

来源

2012-07-04 03:22:17 Cecchi

我不知道，但我想你想做到这一点：

var timer; 
$('.hoverme').on('mouseenter mouseleave', function(e) { 
    if (e.type === 'mouseenter') { 
     clearTimeout(timer); 
     if(!$("#stage1 td").hasClass("hover")) { 
      $("#stage1 td").addClass("hover") 
     } 
    } else { 
     timer = setTimeout(function() { 
      $("#stage1 td").removeClass("hover"); 
     }, 300); 
    } 
});

来源

2012-07-04 03:31:54 adeneo

它是行不通的。 adeneo添加另一个参数为addclass和removeclass ...即时通讯使用jqueryui ...有一个选项。谢谢 – lilsizzo

使用mouseleave代替mouseout。

来源

2012-07-04 03:45:04 Dharmesh

悬停影响只有1项

回答

相关问题