javascript - validacion - validar formulario html5

Agregue clase cuando NO esté sobre el grupo de elementos

Question

Tengo un montón de etiquetas de anclaje dentro de un #container . Estoy seleccionando una etiqueta de ancla aleatoria con jQuery y agregando una clase .active a ella.

Luego, cuando un usuario pasa el mouse sobre cualquiera de estas etiquetas de anclaje, la clase .active se elimina de la que actualmente la tiene:

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

Quiero agregar una cosa más a esto. Si un usuario NO pasa sobre ninguno de los enlaces dentro del #container , quiero agregar la clase .active nuevo a cualquier etiqueta de anclaje aleatorio dentro del #container . ¿Cómo puedo hacer eso?

Answer 1

Puedes hacer esto usando mouseenter y mouseleave en lugar de hover

$("#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"); 
});

Answer 2

$("#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");
});

El segundo controlador está "hover out", aunque probablemente funcione mejor con algo como:

//  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

Más sobre:

• .flotar()
  • ¡No olvide que este método tiene hasta 2 manipuladores!
• .mouseleave ()
  • Ver también: mouseleave vs
• jQuery Chaining