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.

Commentary

Answer 1

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.

Talley

Additional links Trigger css hover with JS or simulate css hover – Talley

This answer helped me achieve the forced mouseover event firing I was looking for in my Angular app. This worked for me: $('TARGET_SELECTOR').dispatchEvent(new MouseEvent('mouseover', {view: window, bubbles: true, cancelable: true})); in Chrome v71.0.3578.80. – Odds

Answer 2

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)

Auld