How to use the @mathigon/boost.hover function in @mathigon/boost

export function piColours($step: Step) {
  const colours = ['#ff941f', '#e66438', '#cc3450', '#b30469', '#822b9b',
    '#5053cd', '#1f7aff', '#258dab', '#2ba058', '#31b304'];  // TODO New colours

  const $cells = $step.$$('.pi-cell');
  for (let $c of $cells) $c.css('background', colours[+$c.text]);
  const $filter = list(10).map(i => $cells.filter($c => +$c.text !== i));

  for (let $c of $cells) {
    const i = +$c.text;
    hover($c, {
      enter() {
        for (let $c of $filter[i]) $c.addClass('hide');
        $step.score('hover');
      },
      exit() { for (let $c of $filter[i]) $c.removeClass('hide'); }
    });
  }
}

const $slider = $step.$('.proof-1 x-slider') as Slider;
  $slider.on('move', n => {
    model.set('x', n / 100);
    updateLabels();
  });

  $step.onScore('blank-0', () => {
    updateLabels();
    delay(() => $slider.play(), 1000);
  });

  $step.onScore('blank-1', updateLabels);

  const $targets = $step.$$('.hover-target');
  hover($targets[0], {enter: () => $slider.set(0)});
  hover($targets[1], {enter: () => $slider.set(100)});

  // -----

  model.set('B1', model.point(40, 100));
  model.set('X1', model.point(170, 100));
  model.set('C1', model.point(170, 20));
  model.set('A2', model.point(220, 100));
  model.set('X2', model.point(170, 100));
  model.set('C2', model.point(170, 20));

  let $geopad = $step.$('.similar-triangle') as Geopad;
  $step.onScore('next-0', () => {
    $geopad.animatePoint('B1', model.point(10, 210), 1000);
    $geopad.animatePoint('X1', model.point(120, 142), 1000);
    $geopad.animatePoint('C1', model.point(162, 210), 1000);
    $geopad.animatePoint('A2', model.point(250, 170), 1000);

export function pascalIntro($step: Step) {
  const $rows = $step.$$('.r').map($r => $r.$$('.c'));

  for (let i = 1; i < $rows.length; ++i) {
    for (let j = 1; j < $rows[i].length - 1; ++j) {
      hover($rows[i][j], {
        enter() {
          $rows[i][j].addClass('red');
          $rows[i - 1][j - 1].addClass('yellow');
          $rows[i - 1][j].addClass('yellow plus');
        },
        exit() {
          $rows[i][j].removeClass('red');
          $rows[i - 1][j - 1].removeClass('yellow');
          $rows[i - 1][j].removeClass('yellow plus');
        }
      });

    }
  }
}

export function triangleInequality3($step: Step) {
  const $targets = $step.$$('.hover-target');
  const $geopad = $step.$('x-geopad') as Geopad;

  hover($targets[0], {
    enter() {
      $geopad.animatePoint('a', $geopad.model.point(90, 110), 1200);
      $geopad.animatePoint('b', $geopad.model.point(165, 105), 1200);
      $geopad.animatePoint('c', $geopad.model.point(210, 110), 1200);
      $step.score('target-0');
    }
  });

  hover($targets[1], {
    enter() {
      $geopad.animatePoint('b', $geopad.model.point(50, 105), 1200);
      $geopad.animatePoint('a', $geopad.model.point(130, 110), 1200);
      $geopad.animatePoint('c', $geopad.model.point(250, 105), 1200);
      $step.score('target-1');
    }
  });