I'm using this MagicMouse which works just fine. When I hover over an element I want to animate the width and height values and then return them to normal once the user unhovers.
I have the following code which defines the values of the cursor in a jS array:
options = {
"cursorOuter": "circle-basic",
"hoverEffect": "pointer-overlay",
"hoverItemMove": false,
"defaultCursor": false,
"outerWidth": 30,
"outerHeight": 30
};
magicMouse(options);
Then I have this code to handle the hover:
$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) {
if (e.type == "mouseenter") {
console.log('hovering');
} else {
console.log('unhovering');
}
});
The mouse itself and the hover function work independently as expected, however I need to be able to animate the width and height values inside the if statement.
Can I do something like MagicMouse.outerWidth = 70?
I'm not familiar with updating values which originate from an array, if someone could point me in the right direction that would be greatly appreciated!
EDIT:
I tried this and it 'works' but it causes a bug where the cursor regenerates in the corner of the screen as if it's reinitialising on every hover event.
$(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');
}
});
I would suggest taking a look into magicMouse source code. You will see that the "cursor" is just another DOM element and that its shape depends on applied CSS classes.
This is basic way to override the default library behavior:
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;
}
A combination of the answer from Vladislav Leonov and my original code made this work.
Working code:
$(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;
}