El otro día un usuario de ConectaTutoriales me preguntó cómo podía hacer un cambio de color cuando el ratón se posicionaba sobre un texto dentro de Adobe Muse.

Vemos que Adobe Muse nos permite hacer el cambio mediante los estados pero no de un texto como tal (Si de una forma o un enlace). Así que les propongo esta rápida solución mediante javascript para que puedan hacer un copia y pega rápido (no hace falta importar como html, muse lo detecta automáticamente al pegar)

<!--cambia el texto de la linea de abajo por el que tu quieras y copia la frase al completo con las etiquetas div incluidas. Dentro de Adobe Muse, puedes pegar directamente. Si lo prefieres puedes importartlo mediante un widget html (Realmente es lo mismo)-->

<div class="animado" style="color:#F80AFF;" onmouseover='this.style.color="#FF0004";' onmouseout='this.style.color="#FFE500";'>Hola! soy un texto con 3 estados de color, normal (magenta), ratón encima(rojo), y ratón fuera (Amarillo). </div>

See the Pen JYNvYo by Rafael Tuduri Amengual (@conecta) on CodePen.

Otro método (posiblemente más adecuado) sería hacerlo mediante CSS que vamos a poder controlar con mayor precisión. Vamos a poner un ejemplo con una transición de color más suavizada. Pero aquí aparece otra pregunta: ¿Cómo puedo insertar CSS personalizado? Lo podemos hacer desde:

Entonces en este caso deberemos poner el css dentro de la etiqueta head y recuerda hacerlo entre las etiquetas <style type=”text/css”></style> para que funcione:

.colorcete {
  color: red;
  -webkit-transition: color 1s ease-out;
  -moz-transition: color 1s ease-out;
  -o-transition: color 1s ease-out;
  transition: color 1s ease-out;
}

.colorcete:hover {
  color: blue;
  cursor: pointer;
}

.fondo {
  color: #ffffff;
  background-color: red;
  -webkit-transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
  -o-transition: background-color 1s linear;
  transition: background-color 1s linear;
}

.fondo:hover {
  background-color: green;
  cursor: pointer;
}

See the Pen Cambio de color vía CSS by Rafael Tuduri Amengual (@conecta) on CodePen.