10 examples of 'js on hover' in JavaScript

42
callHoverCallback() {
43
  if (typeof this.Canvas.options.onHover === 'function' && this.lastData !== this.currentData) {
44
    this.lastData = this.currentData;
45
    this.Canvas.options.onHover({
46
      value: this.currentData,
47
      x: this.x,
48
      y: this.y,
49
    });
50
  }
51
}

239
function hover(hover) {
240
	labelMaterial.opacity  = hover ? 1.0 : 0.5;
241
	markAsChanged();
242
}

249
export function hover($el: ElementView, options: HoverEventOptions) {
250
  let timeout = 0;
251
  let active = false;
252
  let wasTriggeredByMouse = false;
253
254
  $el.on('mouseover', () => {
255
    if (options.preventMouseover && options.preventMouseover()) return;
256
    clearTimeout(timeout);
257
    timeout = delay(() => {
258
      if (active) return;
259
      if (options.enter) options.enter();
260
      wasTriggeredByMouse = true;
261
      active = true;
262
    }, options.delay);
263
  });
264
265
  $el.on('mouseout', () => {
266
    if (!wasTriggeredByMouse) return;
267
    clearTimeout(timeout);
268
    timeout = delay(() => {
269
      if (!active) return;
270
      if (options.exit) options.exit();
271
      active = false;
272
    }, options.exitDelay || options.delay);
273
  });
274
275
  const $clickTarget = options.$clickTarget || $el;
276
  $clickTarget.on('click', () => {
277
    if (active && (!wasTriggeredByMouse)) {
278
      if (options.exit) options.exit();
279
      active = false;
280
    } else if (!active) {
281
      if (options.enter) options.enter();
282
      wasTriggeredByMouse = false;
283
      active = true;
284
    }
285
  });
286
287
  $el.on('clickOutside', () => {
288
    if (!active) return;
289
    if (options.exit) options.exit();
290
    active = false;
291
  });
292
}

19
function hover(e) {
20
    const object = self.objects[self.meshes.indexOf(e.mesh)];
21
    object.onOver({ action: e.action, object });
22
}

410
}, function hoverOut() {
411
  $element.removeClass("searcher-search-result-highlight");
412
  clearTimeout(context.timeOut);
413
  context.timeOut = setTimeout(function () {
414
    self.$currentMetagURL = null;
415
    $element.popover('hide');
416
  }, 2500);
417
});

651
_hoverChanged() {
652
    if (!this._ignoreHover) {
653
        // Skip if dock is not in autohide mode for instance because it is shown
654
        // by intellihide.
655
        if (this._autohideIsEnabled) {
656
            if (this._box.hover)
657
                this._show();
658
            else
659
                this._hide();
660
        }
661
    }
662
}

49
private _hoverCallback(data: IChartDataPoint, e: React.MouseEvent): void {
50
  this.props.hoverOnCallback!(data, e);
51
}

45
private onMouseOut() {
46
  if (this.props.onHover) {
47
    this.props.onHover(undefined);
48
  }
49
}

177
itemEl.addEventListener('mouseover', function itemHover (e) {
178
  if (!galleryItem.preloadState) {
179
    galleryItem.preloadState = 1
180
    preloadImage(
181
      src,
182
      img => {
183
        galleryItem.preloadState = 2
184
        galleryItem.w = img.width
185
        galleryItem.h = img.height
186
        itemEl.removeEventListener('mouseover', itemHover)
187
      },
188
      () => {
189
        /** Reset the preload state in case of error and remove the listener */
190
        galleryItem.preloadState = 0
191
        itemEl.removeEventListener('mouseover', itemHover)
192
      }
193
    )
194
  }
195
})

397
function hover(type, item)
398
{
399
  const id = getID(item);
400
  if (!id)
401
    return;
402
  const hovered = $(".hover", this);
403
  if (hovered)
404
    hovered.classList.remove("hover");
405
  const option = $(`#${id}`, this);
406
  option.classList.add("hover");
407
  this.label.setAttribute("aria-activedescendant", id);
408
  const popup = this.popup;
409
  // if it's the mouse moving, don't auto scroll (annoying)
410
  if (type !== "mouse" && popup.scrollHeight > popup.clientHeight)
411
  {
412
    const scrollBottom = popup.clientHeight + popup.scrollTop;
413
    const elementBottom = option.offsetTop + option.offsetHeight;
414
    if (elementBottom > scrollBottom)
415
    {
416
      popup.scrollTop = elementBottom - popup.clientHeight;
417
    }
418
    else if (option.offsetTop < popup.scrollTop)
419
    {
420
      popup.scrollTop = option.offsetTop;
421
    }
422
  }
423
}