Question

tengo un caso donde tengo que generar un hover de un elemento por medio de un templete ya hecho pero la cuestion es que su duplica por lo mismo de que es llamado de manera dinamica en javascript aqui esta el codigo del templete, al que le hago el hover es el que tiene la clase results-saveItem

<span class="Item-Selection"> <img src="/website-images/icons/btn{{ON}}-love.svg" id="_Botton-Love" class="results-saveItem {{saved}}" title="Add To Lovelist" data-groupnumber="{{groupnumber}}"> </span>

el codigo de jquery que hace el hover es el siguiente:

$(document).on("mousemove",".results-saveItem",function(){ var love_green = "/website-images/icons/love-border-green.svg"; $(".results-saveItem").attr("src",love_green); });

Comments

La próxima vez, intenta que el título y el contenido del la pregunta sean más claros, el título no tiene que ver con el contenido o al menos no lo has transmitido así.

Un saludo.

Answer 1

Hola Jose,

Si quieres hacer hover el evento que usas no es el correcto. Usando mousemove, pasará por dentro de la función cada vez que muevas el ratón sobre el elemento ".results-saveItem"

Deberías usar para el efecto que quieres mouseover o su primo mouseenter

Por otra parte, al cargar una imagen desde JS, deberías crearla previamente de la siguiente forma para que el navegador la lea previamente. Te propongo el siguiente código.

$(document).on("mouseover",".results-saveItem",function(){ 
  var love_green = "/website-images/icons/love-border-green.svg"; 
  var nueva_imagen = new Image(ANCHO,ALTO);
  nueva_imagen.onload = function(){
    nueva_imagen.src = love_green;
    $(".results-saveItem").attr("src", love_green); 
  }
});

Espero que te ayude, un saludo.