1

Tengo unos hipervínculos con el color por CSS con la propiedad !important, debido a que necesito cambiar su color por defecto, el cual les da otra hoja de estilos que no puedo/debo modificar.

.elementos {
  color: #fff !important;
}

Y tengo una animación con TweenMax que modifica el contenedor de .elementos. A esa animación necesito agregarle una propiedad para cambiar el color de los hipervínculos.

var contenedorAnimacion = tl
    .to(cabecera, 1, {backgroundColor: '#fff'})
    .to(caja, 1, {height: 0, autoAlpha: 0});

Necesito agregar el cambio de color. Ya intenté con:

var contenedorAnimacion = tl
    .to(cabecera, 1, {backgroundColor: '#fff'})
    .to(elementos, 1, {color: '#999'})
    .to(caja, 1, {height: 0, autoAlpha: 0});

Pero esto no me funciona. ¿Hay una manera de forzar el cambio o hacer que se ignore la propiedad !important del CSS?

1 respuesta 1

1

¿Has probado agregar el important en la animación por js?

var contenedorAnimacion = tl
    .to(cabecera, 1, {backgroundColor: '#fff !important'})
    .to(elementos, 1, {color: '#999 !important'})
    .to(caja, 1, {height: 0, autoAlpha: 0});

Aunque bueno, la verdad aunque lo anterior o no resuelva tu problema, no es el mejor consejo, lo mejor que te puedo recomendar es no usar !important precisamente por este caso. Ya que es una solución rápida, que funciona la mayoría de casos donde no se dispone de tiempo o de una mejor solución, cosa que en tu caso si la hay, de hecho para sobrescribir en css una hoja de estilos que en cascada abajo o ya asignada, lo mejor es usar la herencia, así:

Si quieres sobrescribir por ejemplo, puedes usar un ancestro:

.ancestro .elementos{
  background: #fff
}

O un selector aún más especifico con más ancestros:

.tatarancestro .bizcancestro .ancestro .elementos{
  background: #fff
}

O nada impide usar etiquetas o ids

html body #main .ancestro .elementos{
  background: #fff
}

Estos tendrán más "fuerza" para sobrescribir la hoja de estilos por defectos, a menos que use !important erroneamente, como tú lo hiciste.

De esta forma, por javascript los puedes modificar, ya que js usa estilos en línea para aplicar css o animaciones y estos por jerarquía tienen mayor "fuerza" para sobrescribir.

Lo otro es que controles donde poner tu hoja de estilos, es decir, si hay estilos del mismo tipo o selector, pero están por debajo, los últimos va a tener mayor "fuerza", "jerarquía" o "prioridad". Esto mismo se aplica para los links de archivos externos, por lo que si puedes controlar que va primero o despues, puedes optar por poner el tuyo despues, así:

<link href="estilos-por-defecto.css" />
<link href="mis-propios-estilos.css" />

Espero te sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.