No se aplican clases en diferentes estados a esos estados.
Acabo de comprobarlo y puedo confirmar que también funciona en tu ejemplo. Primero añadir una clase a tu componente, por ejemplo, .text-blue-on-hoverA continuación, selecciona el estado que quieres modificar, por ejemplo, pasar el cursorAhora, por ejemplo, cambiar el color del texto a azul Resultado: Cada vez que pasa...
Lee la respuesta completa abajo ↓Pregunta
Estoy intentando aplicar una clase en el paso del cursor de un componente y la clase se está aplicando, pero no en el surcurso, se aplica con el estado normal. ! imagen
Por favor, decidme si estoy buscando la función correcta o si la he entendido mal.
PLNKR: https://plnkr.co/edit/Est6AnnGInBa3yvhzCvm?p=preview
No veo nada en CSS ni en HTML que diga que una clase en particular deba aplicarse en el hover u otros estados.
¡Por favor, ayudadme!
Gracias, Taufeek
Respuestas (3)
Acabo de comprobarlo y puedo confirmar que también funciona en tu ejemplo.
- Primero añadir una clase a tu componente, por ejemplo, .text-blue-on-hover
- A continuación, selecciona el estado que quieres modificar, por ejemplo, pasar el cursor
- Ahora, por ejemplo, cambiar el color del texto a azul
Resultado: Cada vez que pasas el cursor sobre tu componente, el texto se vuelve azul.
Nota al margen: El siguiente CSS (o similar) se crea automáticamente:
.text-blue-on-hover:hover {
color: azul;
}
Ahora lo entiendo, funciona perfectamente, solo que no sabía cómo funcionaba.
Gracias @NicoEngler por esta rápida respuesta y por despejarme :)
La clase se aplica independientemente del estado de los componentes. En base a eso, puedes seleccionar un estado, por ejemplo, pasar el cursor y adaptar tu clase a ese estado en particular. Efectivamente, se creará el siguiente CSS si seleccionas el estado pasa el cursor y coloreas tu texto de rojo.
.text-red:hover {
color: rojo;
}
Espero que eso aclare la confusión.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #653
Clase Defautl en bloque
Estoy intentando añadir un bloque personalizado ! 1 y funcionan bien, salvo que los atributos styles están configurados como una clase pred...
Issue #1987
[PREGUNTAS] Crear barra de herramientas en la parte inferior
¿Puedo crear una nueva barra de herramientas que esté situada en la parte inferior (como muestra el cursor) cuando selecciono el componente...
Issue #1347
Los bloques no aparecen en diferentes pestañas y sí se muestran en una sola pestaña
! imagen Hola @artf, Estoy usando tu plugin y quiero usar bloques en diferentes pestañas como bloques, widgets y cuadras, pero cuando uso l...
Issue #416
Carga de imagen con problema cruzado en Origin
He revisado todo el historial de problemas, pero no he encontrado una solución. ! por defecto He cambiado aquí para permitir que Fetch pued...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.