10 examples of 'js on hover' in JavaScript

Every line of 'js on hover' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
42callHoverCallback() {
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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

239function hover(hover) {
240 labelMaterial.opacity = hover ? 1.0 : 0.5;
241 markAsChanged();
242}
249export 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}
19function 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}
49private _hoverCallback(data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {
50 this.props.hoverOnCallback!(data, e);
51}
45private onMouseOut() {
46 if (this.props.onHover) {
47 this.props.onHover(undefined);
48 }
49}
177itemEl.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})
397function 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}

Related snippets