Estoy usando este MagicMouse que funciona bien. Cuando paso el mouse sobre un elemento, quiero animar los valores de ancho y alto y luego devolverlos a la normalidad una vez que el usuario se quita el mouse.
Tengo el siguiente código que define los valores del cursor en una matriz jS:
options = { "cursorOuter": "circle-basic", "hoverEffect": "pointer-overlay", "hoverItemMove": false, "defaultCursor": false, "outerWidth": 30, "outerHeight": 30 }; magicMouse(options);Entonces tengo este código para manejar el desplazamiento:
$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) { if (e.type == "mouseenter") { console.log('hovering'); } else { console.log('unhovering'); } });El mouse en sí y la función de desplazamiento funcionan de forma independiente como se esperaba, sin embargo, necesito poder animar los valores de ancho y alto dentro de la declaración if.
¿Puedo hacer algo como MagicMouse.outerWidth = 70 ?
No estoy familiarizado con la actualización de valores que se originan en una matriz, si alguien pudiera indicarme la dirección correcta, ¡se lo agradecería mucho!
EDITAR:
Intenté esto y 'funciona', pero causa un error en el que el cursor se regenera en la esquina de la pantalla como si se estuviera reiniciando en cada evento de desplazamiento.
$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) { if (e.type == "mouseenter") { magicMouse({ "outerWidth": 60, "outerHeight": 60 }); console.log('hovering'); } else { magicMouse({ "outerWidth": 30, "outerHeight": 30 }); console.log('unhovering'); } });Sugeriría echar un vistazo al código fuente de magicMouse . Verá que el "cursor" es solo otro elemento DOM y que su forma depende de las clases CSS aplicadas.
Esta es una forma básica de anular el comportamiento predeterminado de la biblioteca:
var magicMouseCursor = document.getElementById("magicMouseCursor"); var hoverEls = document.querySelectorAll(".magic-hover"); hoverEls.forEach((item, i) => { item.addEventListener("mouseenter", event => { magicMouseCursor.classList.add('is-hover'); }); item.addEventListener("mouseleave", event => { magicMouseCursor.classList.remove('is-hover'); }); }); div#magicMouseCursor.is-hover { width: 60px !important; height: 60px !important; }Una combinación de la respuesta de Vladislav Leonov y mi código original hizo que esto funcionara.
Código de trabajo:
$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) { var magicMouseCursor = document.getElementById("magicMouseCursor"); if (e.type == "mouseenter") { magicMouseCursor.classList.add('is-hover'); } else { magicMouseCursor.classList.remove('is-hover'); } }); div#magicMouseCursor.is-hover { transition: all 0.2s!important; width: 60px !important; height: 60px !important; }