Как вывести изображение при наведении курсора в коде Wix? - PullRequest
Новая
       9

Как вывести изображение при наведении курсора в коде Wix?

0 голосов
/ 19 декабря 2018

Какой код необходим в 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);
  } );
 }); 
}

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Есть несколько проблем с вашим кодом:

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);
}
0 голосов
/ 19 декабря 2018

Вы почти правильно поняли.На вашей странице код должен иметь следующее: 

$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);
    } );
 });
...