Hover over an element using JavaScript?

Question

Note: I want to hover the element not to trigger an event on hover. (a kind of automated hover using Javascript)

I want to react on Facebook post's comments on my wall randomly by running JS in chrome console.

For which I have written this line to test the 1st index in the list:

document.querySelectorAll('._6ijk a._6a-y')[0].click()

When I hover over an element manually and use this code then It works, for which the selector is:

document.querySelector("[aria-label=Love]").click()

but before hovering there is no such element for "[aria-label=Love]"

But as all other reactions except like button appear on hovering on the like button which is running me into the trouble. Is there any good solution for tackling this scenario?

The DOM element on facebook are dynamically created, when you hover at that time new element is added. — Rishab, Jul 21 '19 at 06:01
Try to trigger mouseenter event on that element, it will create dynamic DOM — Rishab, Jul 21 '19 at 06:05
Possible duplicate of [How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?](https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover) — Joseph, Jul 21 '19 at 06:39

score 6 · Accepted Answer · answered Jul 21 '19 at 07:25

You first need to create an Event and then dispatch that on your required DOM element.

Here is how to create on mouseover event

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

Then add an eventListener to your element yourself.

yourelement = document.querySelector('css selector here');
yourelement.addEventListener('mouseover', function() {
      //something here
});

...and then finally dispatchEvent

yourelement.dispatchEvent(event);

I hope it works for whatever you're trying to achieve! Cheers!

Thanks for the explanation too. It will really help a lot me as well as others. — GigaByte, Jul 21 '19 at 07:30

score 0 · Answer 2 · answered Mar 29 '23 at 19:34

Chrome developer tools -> console tab, type:

Locate the element e.g.

 var element = document.querySelectorAll('div.collapse.in.show .milestone-circle')[1]

Add event to the 'element'

 element.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}))

Hover over an element using JavaScript?

2 Answers2