jquery触发器悬停在具有相同选择器属性的另一个元素上

时间:2013-03-11 10:52:34

标签: javascript jquery hover selector bind

这听起来很简单,并且有一个涉及改变CSS类的解决方案,但我想知道是否有一个优雅的,即时的解决方案来解决以下问题。

这是a similar question,但它为我的场景创建了“过多的递归”。

所以我有两个按钮都可以进入下一个标签;一个在内容的顶部,一个在下面。当我将鼠标悬停在其中任何一个上时,我希望它们都显示悬停状态。他们有相同的HTML代码;

<a href="#" class="button step-next" onclick="showStep(3); return false;">Next &raquo;</a>

并且在另一篇文章之后,我尝试了解决方案;

$('a.step-next').on('mousenter mouseleave', function(e) {
    $('a.step-next').not(this).trigger(e.type);
});

但是我使用not()的初始逻辑是错误的;它只会在两个元素中的每个元素之间前后触发事件。

显然,我可以改变CSS来添加一个新类并在hover / not上删除它,这就是我要走的路线。但是,是否只有触发器解决方案?

2 个答案:

答案 0 :(得分:0)

不确定要实现的目标( html required ),但这可能是您正在寻找的解决方案:

$('a.step-next').on('mousenter mouseleave', function(e) {
  $(this).siblings('a.step-next').trigger(e.type);
});

答案 1 :(得分:0)

如果我理解正确,你不希望代码生成的事件重新触发代码..

如果是这样,您可以使用.trigger()方法的 extraParameters

$('a.step-next').on('mousenter mouseleave', function(e, fromCode) {
    if (fromCode === undefined){
        $('a.step-next').not(this).trigger(e.type, true);
    }
});