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