javascript - 当悬停不在任何元素组上时添加类

Question

我在 #container 中有一堆 anchor 标记。我正在使用 jQuery 选择一个随机 anchor 标记并向其添加一个 .active 类。

然后，当用户将鼠标悬停在任何这些 anchor 标记上时，.active 类将从当前拥有它的类中删除:

$("#container").find("a").eq(random).addClass("active"); 
$("#container a").hover(function() {
    $("container a.active").removeClass("active");
});

我想再补充一点。如果用户未将鼠标悬停在 #container 内的任何链接上，我想再次将 .active 类添加到 #container 内的任何随机 anchor 标记。我怎样才能做到这一点？

Answer 1

$("#container").find("a").eq(random).addClass("active"); 
$("#container a").hover(function() {
    $("container a.active").removeClass("active");
},
function(e) {
    $("#container").find("a").eq(random).addClass("active");
});

第二个处理程序是“悬停”，尽管它可能会更好地工作，例如:

//  begin working on parent container
//  .mouseleave allows us to know exactly,
//      on a single event fire,
//      when mouse has left the parent container
$("#container").on("mouseleave", function(e) {
    //  of course, add class to random anchor
    $(this).find("a").eq(random).addClass("active");
})  //  jQuery Chaining allows us to then move on forward to the a tags
.find("a").hover(function() {   //  upon hover, remove ALL instances of "active" class
    $("#container a.active").removeClass("active");
})  //  our returned Object is the same as "$("#container").find("a")"
.eq(random).addClass("active");

jsFiddle

更多关于:

• .hover()
  • 别忘了，此方法最多有 2 个处理程序!
• .mouseleave()
  • 另请参阅:mouseleave vs
• jQuery Chaining