1

Tengo un icono que al hacerle hover se pone de color rojo, quiero cambiar con una funcion de java script que al volver a hacer hover, este sea de otro color. Esto es lo que he intentado:

function funcion(){
icono1.onmouseover.style.color = "green"
}
2
  • No es muy claro lo que necesitas.. si ya tienes un boton que cambiar con el hover, para que quieres hacerlo con javascript?, deberias especificar mas claramente que es lo que pretendes lograr
    – David081
    el 4 abr. 2022 a las 13:50
  • Perdon, no me he sabido explicar con exactitud. El punto es, cuando se cumpla una condición en un if, que al pasar por encima del objeto se ponga de un color y si esa condicion no se cumple, que el color sea diferente el 4 abr. 2022 a las 14:12

3 respuestas 3

2

Además de las soluciones intercambiando clases de CSS como ya te han mencionado, te agrego una posible solución utilizando solamente javascript que escala a cuando necesitas múltiples colores.

La idea es utilizar los eventos de onmouseenter y onmouseleave para simular la pseudoclase hover de css.

Cuando el mouse entra al elemento, elije el primer color del arreglo de colores, lo coloca de fondo e incrementa el contador. Cuando el mouse sale del elemento, restaura su color original. Al ir incrementando el contador, cada vez que se entre al elemento realizará hover en un color diferente.

De cualquier manera, procura evitar el hover y los eventos del mouse en dispositivos móviles ya que no ofrecen una buena experiencia en dispositivos de tacto. Recuerda desactivarlos aplicando media queries o bien utilizando condicionales en JavaScript.

let button  = document.getElementById("button")
let defaultColor = button.style.backgroundColor
let colors = ["red", "blue", "green", "purple"]
let count = 0;

button.onmouseenter = function (e) {
    e.target.style.backgroundColor = colors[count % colors.length];
    count++;
}

button.onmouseleave = function (e) {
    e.target.style.backgroundColor = defaultColor;
}
<button id="button">Hover over me!</button>

1

yo en tu caso, lo que haría es cambiar/añadir una clase css con los diferentes colores.

icono1.classList.replace("color_1", "color_2"); // Intercambiar clases

Por si sólo prefieres añadir, o en algún momento quitar la clase, también te facilito las siguientes lineas:

icono1.classList.remove("color_1"); // Eliminar clase
icono1.classList.add("color_2"); // Añadir clase

De este modo, aplicando diferente color en la nueva clase en estado :hover, se mostrará como buscas con un código sencillo.

¿Te sirve este forma?

Un saludo.

Edit: Añado un ejemplo

i = 1;
function color(){
  const list = document.getElementById("boton").classList;
  list.remove("button1","button2","button3","button4");
  list.add("button" + i);
  if(i < 4){ i++; }
  else{ i = 1;}
}
button{
  background-color:#c2c2c2;
  border:none;
  padding:1em;
  border-radius:5px;
  font-weight:800;
  transition-duration:0.2s;
}
button:hover{
  color:#fff;
}
.button1:hover{color:blue}
.button2:hover{color:red}
.button3:hover{color:yellow}
.button4:hover{color:green}
<button onmouseleave="color()" id="boton">Botón!</button>

Edit 2: Me ha dado envidia lo que han hecho los demás de que tenga varios colores y lo he añadido a mi ejemplo.

2
  • 1
    Genial la vía que estabas tomando, solo que funciona solamente cuando haces click. Haciendo hover solamente no cambia el color. Trata de jugar cambiando onclick por onmouseleave o onmouseenter para que funcione como especifica el usuario en la pregunta. el 4 abr. 2022 a las 21:50
  • @JaimeMenéndez gracias por el apunte! ya he hecho el cambio. La verdad, había interpretado que el evento que cambia el color era algún otro no especificado. Ahora está puesto con mouseleave. Gracias!
    – Ajen
    el 5 abr. 2022 a las 15:05
0

Yo haría una lista de colores y que escoja uno aleatorio de esta lista (que no sea el color que ya tiene).

function funcion(){
// lista con los colores que desas tener
let lista_inicial = ["red","green","blue"]
// obtén la posición del color actual (si es que tiene color)
const index = array.indexOf(icono1.onmouseover.style.color);
// borra ese color de la lista para evitar la posibilidad de escoger otra vez el mismo color
if (index > -1) {
  lista_inicial.splice(index, 1); // el 1 significa que borre solo ese valor
}
// escoge un valor aleatorio de la lista con todos los colores menos el que ya tiene el botón
icono1.onmouseover.style.color = lista_inicial[Math.floor(Math.random() * lista_inicial.length)]
}

Saludos!

Tu Respuesta

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

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