悬停时添加类而不是任何元素组

Question

我在#container内有一堆锚标签。我正在使用jQuery选择一个随机锚标记，并为其添加一个.active类。

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

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

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

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

Answer 2

您可以使用mouseenter和mouseleave代替悬停

来完成此操作

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