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?

Answer 1

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!