悬停影响只有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并与第二个参数
它似乎是以前的答案的组合。
使用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执行测试]
试试这个removeclass：live()已被弃用，你可以使用on()方法：
$('.hoverme').on('mouseover', function(event) {
$("#stage1 td").addClass("hover")
}).on('mouseout', function() {
$("#stage1 td").removeClass("hover")
})
在这种形式下，'.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。在语义上这更有意义;仅仅因为元素在标记中彼此接近并不意味着它们应该被视为一个大元素。
我不知道，但我想你想做到这一点：
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);
}
});
它是行不通的。 adeneo添加另一个参数为addclass和removeclass ...即时通讯使用jqueryui ...有一个选项。谢谢 – lilsizzo
使用mouseleave代替mouseout。
你能告诉我们在哪里＃stage1的TD？ –
为什么你将第二个参数传递给.addClass（）？它只需要一个参数，一个字符串或一个函数。 – Ian
@JeffRobertDagala err我会说＃stage1 td是我担心的最不重要的事情。它是使td背景变成彩色的。 ianpgall：我使用jqueryui因此我能够使用第二个参数。编辑帖子提到，现在 – lilsizzo