Как убрать изображение при наведении курсора в коде Wix?
Какой код нужен в Wix, чтобы изображение исчезло из поля зрения, когда указатель мыши находится над изображением, и исчезло из поля зрения, когда указатель мыши не наведен на изображение?
Я пробовал использовать этот код (и другие похожие), но он не работает:
export function image4_mouseIn(event) {
$w.onReady(function () {
$w('#image4').onMouseIn( (Event) => {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w("#image4").hide("fade", fadeOptions);
} );
});
}
export function image4_mouseOut(event) {
$w.onReady(function () {
$w('#image4').onMouseOut( (Event) => {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w("#image4").show("fade", fadeOptions);
} );
});
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы почти правильно поняли. В коде вашей страницы должно быть следующее:
$w.onReady(function () {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w('#image4').onMouseOut( (Event) => {
$w('#image4').show('fade', fadeOptions);
} );
$w('#image4').onMouseIn( (Event) => {
$w('#image4').hide('fade', fadeOptions);
} );
});
С вашим кодом есть пара проблем:
1) Вы создаете обработчики событий как динамически, так и статически вместе. Технически вы можете использовать оба метода, но не одновременно.
Чтобы сделать это динамически (без обычного объявления функции):
$w.onReady(function () {
$w('#image4').onMouseIn( (Event) => {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w("#image4").hide("fade", fadeOptions);
} );
// show function here
} );
Сделать это статически (без onReady)
export function image4_mouseIn(event) {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w("#image4").hide("fade", fadeOptions);
}
Примечание: вам необходимо связать эту функцию с кнопкой, используя панель свойств.
2) Вы не можете запустить событие mouseOut для скрытого изображения. Чтобы обойти это, вы можете добавить блок позади изображения (блок может быть прозрачным) и создать обработчик события mouseOut в блоке, который снова показывает изображение.
export function box1_mouseOut(event) {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w("#image4").show("fade", fadeOptions);
}
Этот код отлично работает! Спасибо за помощь!
Идеально работает Попробуйте это
$w.onReady(function () {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w('#image4').onMouseOut( (Event) => {
$w('#image4').show('fade', fadeOptions);
} );
$w('#image4').onMouseIn( (Event) => {
$w('#image4').hide('fade', fadeOptions);
} );
});
Я понимаю, что вы делаете с этим кодом (логически выглядит неплохо), но у меня он не сработал. Тем не менее, большое спасибо за помощь!