El mouse sobre el rectángulo cambia el color de la fuente en Axure

Estoy usando Axure para crear un prototipo de front-end interactivo.

En mi diseño, tengo una tabla con 3 celdas principales ( p.d., las celdas son rectángulos que acabo de juntar ) en las que me concentro. En esas celdas tengo algo de texto, pero son archivos separados en el 'Esquema de la página'. He agrupado el texto y el rectángulo de cada rectángulo en sus propios grupos.

Ahora lo que quiero hacer es poder desplazarme sobre el rectángulo y el texto cambiará de color. No quiero desplazarme sobre el texto, solo quiero poder desplazarme sobre el rectángulo y poder cambiar el color de la fuente.

Aquí hay una imagen de la tabla, todas las cosas rojas marcadas son texto.IMAGEN

¿Cómo puedo hacer esto?

Respuestas (2)

La solución más fácil es usar un widget: texto con el espacio adecuado alrededor.

La solución para su situación con dos widgets separados es la siguiente:

  1. Asigne un nombre al widget de texto (esto ayuda a encontrarlo durante el paso 4)
  2. Haga clic derecho en el widget de texto y seleccione 'Estilos de interacción'
  3. Vaya a la pestaña 'Seleccionado' y configure los estilos deseados. Guarda el estilo.
  4. Seleccione el rectángulo y agregue un caso 'OnMouseEnter' y 'OnMouseOut' para seleccionar y anular la selección del widget de texto

Editar: asegúrese de que el texto se encuentre debajo del rectángulo; de lo contrario, al pasar el cursor sobre el texto se eliminará el efecto de desplazamiento. Nuevamente, para decir lo obvio, a menos que haya una razón muy específica para usar dos widgets separados, solo usaría uno.

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Hay un método más simple para hacer esto (creo que se introdujo en v7).

Los grupos tienen una opción (dentro de las propiedades) para "Activar estilos de interacción del mouse". Esto significa que los eventos de interacción se pasan a todos los componentes dentro de un grupo cuando el evento de interacción ocurre en cualquier componente individual dentro del grupo.

Para hacer esto, agrupe los componentes (seleccione todos los componentes y CTRLG), elija la pestaña de propiedades y marque "Activar estilos de interacción con el mouse".

Esto le permite establecer los estilos de interacción de cada componente dentro del grupo. El común es hover. Cuando pasa el mouse por encima, desea que el componente agregado indique que esto ha sucedido, por lo que puede cambiar los bordes, el color de fondo, etc. Simplemente coloque el mouse sobre el estilo de interacción. Cuando mueva el mouse por el grupo, el estilo de interacción MouseOver se aplicará a todos los componentes dentro del grupo.

Esto soluciona un problema común cuando tiene un ícono y algo de texto, digamos en una fila dentro de una lista. Desea que el mouse sobre o la presión del mouse se indiquen a través del estilo de interacción. Antes de que esta opción estuviera disponible, obtendría puntos ciegos donde el mouse no funcionaba (por ejemplo, el ícono) o obtendría un comportamiento de presión diferente dependiendo de dónde presionaba en la fila.

Sugerencia: si solo desea cambiar el fondo, solo necesita configurar el estilo de interacción MouseOver para el componente que muestra el fondo.