Is there any way to simulate onmouseover in Developer Tools?

Question

I know that Firefox has a way to simulate hover, active and focus filters.

Is there any way to simulate onmouseover elevation?

I want to simulate this in two elements together, is this possible?

I didn't find any extension for this purpose. Thank you in advance.

Answer 1

Yes, as it is selected in your image you can use the dispatchEvent method only you must previously create the event in the chrome console and execute it.

1. pre-create :hover event

var event = new MouseEvent("mouseover");

2. You send the event to the DOM element where $0 is the element that you have selected in the debugger of your browser (in your case a div with the class facebox)

$0.dispatchEvent(event)

Answer 2

You can use dispatch to send / fire an event for an element: element.dispatchEvent(event);. The support may vary on different browsers and versions; my demo on jsfiddle worked on chrome 65.

Given this html

<div id="menu">
  <h3>Menu</h3>
  <div>Sample to fire onmouseover using a script</div>
  <ul>
   <li>one</li>
   <li>two</li>
   <li>three</li>
  </ul>
</div>
<button onclick="simulateMouseOver()">simulate onMouseOver</button>

Below an onmouseover-event is set for <div id=menu>. As soon as the mouse is moved over the div the event fires:

var menu =  document.getElementById("menu");
menu.addEventListener("mouseover", function(event){   

    event.target.style.backgroundColor = "blue";
    setTimeout(function() {
      event.target.style.backgroundColor = "";
    }, 500);
}, false)();

To raise the onmouseover-event from inside a script you

1. first have to create the correct event
2. an then fire / dispatch this event to the target-element

See this code

function simulateMouseOver() {
  var listItems = document.querySelectorAll("ul li")
    var item1 = listItems.item(1);
  var event = new MouseEvent('mouseover', 
       {view: window, bubbles: true, cancelable: true});

  var cancelled = !item1.dispatchEvent(event);
  if (cancelled) {
    // a handler called preventDefault.

  } else {
    // none of the handlers called preventDefault.

  }
}

You can find out more at

• MDN dispatch event
• MDN event mouseover

The question simulate a mouse click from 2011 or Trigger events in javascript from 2010 may be of use regarding the support in older browsers.