Is there anything similar to activating the hover state (CSS) for activating javascript events?

So I'm using Angular Materials tooltip. Everything works fine. I need to style the tooltip as per the theme but can't inspect the element as it's only visible when the mouse moves over the element.

The custom class works and I can change the color. I'd like to change the width and other CSS properties but I can't inspect the element to check what styles are getting applied by default.

So the main question is: Is there anything similar to activating the hover state (CSS) for activating javascript events (mouseover/mouseenter)?

Is there anything similar to activating the hover state (CSS) for activating javascript events?

So I'm using Angular Materials tooltip. Everything works fine. I need to style the tooltip as per the theme but can't inspect the element as it's only visible when the mouse moves over the element.

https://material.angular.io/ponents/tooltip/examples#tooltip-custom-class The custom class works and I can change the color. I'd like to change the width and other CSS properties but I can't inspect the element to check what styles are getting applied by default.

So the main question is: Is there anything similar to activating the hover state (CSS) for activating javascript events (mouseover/mouseenter)?

• javascript
• css
• angular
• typescript
• angular-material

• 1 Does this answer your question? Is there any way to simulate onmouseover in Developer Tools? – Fabian S. Commented Oct 28, 2021 at 13:42
• Not really. It's a hacky way to go about it. I was inquiring if there was a way to directly do it from the dev tools rather than writing javascript in the console. @FabianS. – user17147397 Commented Oct 28, 2021 at 18:25
• 1 Fabian's answer is the best way to acplish this goal. Use the .dispatchEvent method with new Event("mouseover") for testing outside something like puppeteer – async await Commented Oct 29, 2021 at 1:42

1 Answer 1

A cool trick to capture mouseenter:mouseleave events:

1. Open the console (in the browser)then enter:

setTimeout(() => {debugger;}, 5000)

press enter and hover above the item after the time 5s you can debug/ style the element.

2. Open source tab in the browser then press F8