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.

This is the demo

function simulateMouseOver() {  
  var item2 = document.querySelectorAll("ul li")[1];
  var event = new MouseEvent('mouseover', 
           {view: window, bubbles: true, cancelable: true});
      
  var cancelled = !item2.dispatchEvent(event);
  if (cancelled) {
        // a handler called preventDefault.
        
  } else {
        // none of the handlers called preventDefault.

  }
}

var menu =  document.getElementById("menu");
menu.addEventListener("mouseover", function(event){   
   event.target.style.backgroundColor = "lime";
   setTimeout(function() { 
            event.target.style.backgroundColor = "";
   }, 800);
}, false);

ul {background-color: lightgray}

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

The html

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

Below an onmouseover-event is set for <ul id=menu>. As soon as the mouse is moved over ul or any node inside ul:

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 item2 = document.querySelectorAll("ul li")[1];
  var event = new MouseEvent('mouseover', 
           {view: window, bubbles: true, cancelable: true});      
  var cancelled = !item2.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.