¿Puedo cambiar solo el ángulo de un degradado lineal en css3 al pasar el mouse?

Así que tengo un degradado lineal en un elemento y quiero cambiar el ángulo de los degradados para que esté al revés cuando paso el cursor por el elemento sin volver a escribir todas las reglas. ¿Es esto posible?

preguntado el 22 de mayo de 12 a las 09:05

2 Respuestas

Podrías hacerlo más SECO usando sass y mezclas.

@mixin gradient($angle) {
    background: linear-gradient($angle , rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}

#grad {
    @import gradient("bottom");
}

#grad:hover {
    @import gradient("right");
}

contestado el 22 de mayo de 12 a las 16:05

iba a actualizar mi respuesta para agregar soluciones de marcos CSS, abortando la actualización gracias a esto. bueno, +1. - Eliran Malka

Aprecio sus respuestas, pero sass es solo un preprocesador, pero el css cargado seguirá siendo grande, si tengo muchos gradientes con muchos hovers. Supongo que no se puede hacer de la manera que yo quería. - jozsef kerekes

¿Por qué no? simplemente cree una regla para el hover estado especificando una pseudo clase en su CSS:

#grad {
    background-image: linear-gradient(bottom, rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}
#grad:hover {
    background-image: linear-gradient(right , rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}

si desea seguir el principio DRY, cree esas reglas como clases auxiliares, luego adjúntelas y sepárelas al elemento. aquí hay un ejemplo usando jQuery:

CSS:

.grad {
    background-image: linear-gradient(bottom, rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}
.grad-rotated {
    background-image: linear-gradient(right , rgb(23,125,250) 28%, rgb(0,0,0) 80%);
}

JS:

$('.grad').hover(
    function() {
        $(this).toggleClass('grad', false).toggleClass('grad-rotated', true);
    },
    function() {
        $(this).toggleClass('grad', true).toggleClass('grad-rotated', false);
    }
);

Referencias:

Nota: por conveniencia, sólo la forma básica de la linear-gradient El valor de propiedad se muestra aquí, para proporcionar compatibilidad entre navegadores, agregue los valores de propiedad prefijados específicos del proveedor (p. ej. -o-linear-gradient, -moz-linear-gradient).

Cláusula de exención de responsabilidades: como los agentes de usuario generarán CSS de manera más eficiente, en general, es mejor preferir las soluciones basadas en CSS en lugar de las basadas en JS.

contestado el 23 de mayo de 12 a las 08:05

+1 en la respuesta correcta. Sin embargo, tengo que estar en desacuerdo con la solución JS, ya que encuentro que usar JS donde CSS es una mala práctica apropiada. - Jørgen R

estoy de acuerdo, CSS se renderizará mucho más rápido, es más elegante, etc. actualizando mi publicación sobre esto. Gracias. - Eliran Malka

Me gustaría enfatizar esta parte "sin volver a escribir todas las reglas". Debido a las propiedades del proveedor, esto puede ocupar una gran cantidad de archivos. Así que quiero algo como esto: selector {background: linear-gradient:...} selector: hover {fondo: ángulo de gradiente lineal: 90%} - jozsef kerekes

con las clases auxiliares en el CSS, solo tendrá que crear cada permutación de regla una vez. - Eliran Malka

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.