child - Pseudo-clases CSS con jQuery

parent().parent() jquery

Question

Acabo de aprender un poco jQuery, y estoy tratando de usarlo para un simple efecto de cambio de color. Digamos que tengo dos <div > s, #foo y #bar. #foo tiene muchas URL y tiene el siguiente CSS definido:

#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}

ahora me gustaría cambiar el color de los enlaces (a: enlace) en #foo cuando el usuario haga clic en #bar, pero mantenga intacto el color a: hover, así que escribo mi función de esta manera:

//...
$("#bar").click(function () {
  $("#foo a").css("color", "red");
});
//...

El problema es que, si bien esta función cambia todos los enlaces a rojo, se pierde el color a: hover, es decir, cuando un usuario mueve el cursor a los enlaces, permanecerán rojos, no se volverán negros como esperaba.

Como veo lo que jQuery hace es poner un estilo en línea para <a> s dentro de #foo, los convierte en <a style="color:red;" href="..." <a style="color:red;" href="..." >, supongo que esto sobrescribirá la pseudoclase: hover. Como el attr de estilo en línea para pseudo-class no ha sido implementado por nadie afaik, dudo que pueda obtener el efecto deseado en absoluto ...

Aún así, ¿hay alguna solución que no requiera que escriba algo así como

$("#foo a").hover(
    function(){ $(this).css("color", "black");},
    function(){ $(this).css("color", "blue");}
)

?

Gracias.

Answer 1

! important parece hacer que la propiedad CSS sea más fuerte que el estilo en línea, al menos en Firefox. Intenta cambiar tus estilos a algo como esto:

#foo a:hover { color: black !important; }

Answer 2

Tal vez podrías eliminar la clase que agregaste cuando colocas el cursor sobre los enlaces, así:

$(''#bar'').click(function() {
  $(''#foo a'').css(''color'', ''red'');
});
$(''#foo'').hover() {
  $''#foo a'').removeCss(''color'', ''red'');
});

[EDITAR]: es posible que deba agregar una declaración IF para ver si la clase está allí en primer lugar.

Answer 3

AFAIK, jQuery no puede establecer pseudo clases. Sin embargo, hay otra manera:

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

Answer 4

Otra forma desagradable de hacerlo con Javascript es vaciar el elemento contenedor y llenarlo nuevamente con los contenidos y configurar nuevamente el evento click. Esto destruye todos los estados y eventos por lo que tienen que configurarse de nuevo, pero para cosas simples que no contienen una gran cantidad de datos, ¡funciona!

Utilizo esto para los menús de Nav que usan la clase: hover.

$(''#page_nav ul'').click(clearNavMenu_Hover);

function clearNavMenu_Hover() {
    var tmpStore=$(''#page_nav'').html();
    $(''#page_nav'').empty();
    $(''#page_nav'').html(tmpStore);
    $(''#page_nav ul'').click(clearNavMenu_Hover);
}

Answer 5

Extraído de Establecer reglas de CSS de pseudoclases de Javascript

En realidad, puede cambiar el valor de una clase en hover o con: after o cualquier pseudoclase que desee con javascript:

$(document).ready(function()
{
    var left = (($(''.selected'').width() - 7) / 2) + ''px'';
    document.styleSheets[1].insertRule(''.selected:after { left: '' + left + ''; }'', 0);
    document.styleSheets[0].cssRules[0].style.left = left;
});

Espero que esto ayude a cualquiera.