Jquery: Hover/unhover combina con el desenfoque/concentro

Question

He estado buscando a través de las preguntas, pero no puedo encontrar exactamente lo que estoy buscando ..

Quiero saber cómo hacer una función que hace lo siguiente:

1. Si pasa un elemento del elemento cambia a azul, por ejemplo
2. Si unhover cambia de nuevo a predeterminado
3. Si hace clic en él (enfoque), se mantiene el el color azul de los efectos de la libración incluso si unhover que
4. Si hace clic de distancia (desenfoque), que va volver al color predeterminado y el efecto pasar el ratón funciona de nuevo

? ¿Cómo lo hago;)?

Answer 1

Usar diferentes clases de CSS podría ser una solución.

.elementHovered { color : blue; } 
.elementFocused { color : blue; } 


<input type="text" value="Test Element" id="test"/> 

$("#test").hover(function() { 
    $(this).addClass("elementHovered"); 
}, function() { 
    $(this).removeClass("elementHovered"); 
}); 


$("#test").focus(function() { 
    $(this).addClass("elementFocused"); 
}); 

$("#test").blur(function() { 
    $(this).removeClass("elementFocused"); 
}); 

jsFiddle demostración aquí: http://jsfiddle.net/ZRADe/

Answer 2

Me gustaría establecer una bandera y luego hacer que cada función haga lo que desee.

Así, el desplazamiento no establece la bandera y actúa como normal, cambiando de ida y vuelta. pero la segunda función en vuelo estacionario, la función unhover no cambiaría de nuevo a defecto si el indicador se establece que se crearía por el clic y desarmar por la falta de definición ...

JQUERY LIBRACIÓN:

http://api.jquery.com/hover/

Answer 3

Sus primeros 3 requisitos son sencillos. 1 + 2 son fáciles de hacer con sólo el CSS y el: hover selector de

Para 3 que se necesita para cambiar la clase del elemento con jQuery al igual que

$('#MyElement').removeClass('RegularClass'); 
$('#MyElement').addClass('SelectedClass'); 

En cuanto a su cuarto requisito, puede Quiero echar un vistazo a JQuery's focusout event que puede lograr lo que necesita.

Answer 4

depende de lo que los elementos que desea utilizar, si lo está haciendo por los insumos, que recomiendan el uso de un focusin, focusOut lugar.

Pero se vería algo como esto.

$(document).ready(function() { 
    $("li").hover(
    function() { 
     $(this).addClass('.blue'); 
    }, 
    function() { 
     $(this).removeClass('.blue'); 
    } 
    ); 

    $("li").click(function() { 
     $("li").removeClass('.blue'); 
     $(this).addClass('.blue'); 
    }); 

}); 

Answer 5

1 y 2: Utilice CSS.

como:

En CSS (borrosa es la clase base):

.blurry{background:red;} 
.blurry:hover{background:blue;} 
.focused{background:blue;} 

EN JS:

$(document).ready(function() { 
    $('#elementID').focus($(this).addClass('focused').removeClass('blurry');) 
    });) 
    $('#elementID').blur($(this).addClass('blurry').removeClass('focused');) 
}); 

El CSS se hará cargo de los eventos mouseover/mouseout sin que tenga para interactuar con el DOM. Y el js hace el resto :)

Answer 6

yo estaba tratando de hacer algo muy similar con un div y esto es lo que ha funcionado mejor para mí:

var focusColor = "#008BFF"; 
var hoverColor = "#6FBEFF"; 

var clicked = false; 

elem.focusin(
    function() { 
     clicked = true; 
     elem.css({ "border-color": focusColor }); 
    } 
); 

elem.focusout(
    function() { 
     clicked = false; 
     elem.css({ "border-color": "" }); 
    } 
); 

elem.hover(
    function() { 
     if (clicked) { 
      elem.css({ "border-color": focusColor }); 
     } 
     else { 
      elem.css({ "border-color": hoverColor }); 
     } 
    }, 
    function() { 
     if (clicked) { 
      elem.css({ "border-color": focusColor }); 
     } 
     else { 
      elem.css({ "border-color": "" }); 
     } 
    } 
);