我正在使用這個很好用的MagicMouse。當我將滑鼠懸停在一個元素上時，我想為寬度和高度值設定影片，然后在用戶懸停后將它們恢復正常。
我有以下代碼，它定義了 jS 陣列中游標的值：
options = {
"cursorOuter": "circle-basic",
"hoverEffect": "pointer-overlay",
"hoverItemMove": false,
"defaultCursor": false,
"outerWidth": 30,
"outerHeight": 30
};
magicMouse(options);
然后我有這段代碼來處理懸停：
$(document).on("mouseenter mouseleave", ".fwds3dcov-thumbnail", function (e) {
if (e.type == "mouseenter") {
console.log('hovering');
} else {
console.log('unhovering');
}
});
滑鼠本身和懸停功能按預期獨立作業，但是我需要能夠為 if 陳述句中的寬度和高度值設定影片。
我可以做類似的事情MagicMouse.outerWidth = 70嗎？
我不熟悉更新源自陣列的值，如果有人能指出我正確的方向，我將不勝感激！
編輯：
我試過這個，它“作業”，但它會導致一個錯誤，游標在螢屏的角落重新生成，就好像它在每個懸停事件上重新初始化一樣。
$(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');
}
});
uj5u.com熱心網友回復：
我建議看看magicMouse 源代碼。您將看到“游標”只是另一個 DOM 元素，它的形狀取決于應用的 CSS 類。
這是覆寫默認庫行為的基本方法：
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;
}
uj5u.com熱心網友回復：
Vladislav Leonov 的答案和我的原始代碼相結合，使這項作業有效。
作業代碼：
$(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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/405296.html
標籤：