"Inspect" guidance element?

Question

Note. I read similar topics, but none of them was my problem - I can click on it normally, it just disappears.

I find the Inspect Element an invaluable tool in Chrome, however my last foray when I learn the magical ways that many of you already have has forced me to create a submenu for an item in my navigation bar that appears below this hovering of this parent element.

The popup (or down) is not quite as stylish as I would like, so I right-click> check an element to see what exactly is happening and get a better idea of ​​how to achieve the desired effect.

However, as soon as I move the mouse away from the menu, it disappears.

Therefore, I cannot select various elements in the scan area and see which area is selected at the same time.

Is there a way around this without changing the menu so that it “pops up” after activation?

Answer 1

If the hover effect is set using CSS , then yes, I usually use two options to get this:

One, before see hover effect , when the mouse leaves the hover area :
Open the inspector in the docked window and increase the width until you reach your HTML element , then right-click and the popup menu should be above the inspector area ... then when you move the mouse over the inspector, the hover effect will continue to work in the document .

Two, before the keep hover effect , even if the mouse is not over the HTML element , open the inspector, go to Styles TAB and click on the icon in the upper right corner that says Toggle Element State ... (dashed arrow rectangle). There you can manually activate the Hover Event (among others) with the checkbox selected.

If this is not clear, let me know and I can add some screenshots. Edited : added screenshot.

And finally, and, as I said at the beginning, I can only do this if hover installed with CSS:HOVER ... when you control hover state using jQuery.onMouseOver , for example, only (sometimes) method works, One method .

Hope this helps.

Answer 2

If the guidance is triggered by JS, just pause the script from the keyboard. This is a much simpler way to freeze the DOM than other answers suggest.

Here's how you do it in Chrome. I am sure Firefox has an equivalent procedure:

• Open Developer Tools and go to Sources.

• Note the shortcut to pause script execution. For me, this is F8 :

  

• Interact with the user interface to display the item.

• Press F8 .
• How can you move the mouse, check the DOM, whatever. The item will remain there.

Answer 3

What worked for me is to select a specific tag that I would like to test and do this:

After doing the above, as a rule, I would usually select a tag, then the drop-down menu will automatically remain as it is, even when I move the mouse pointer to other places, such as Inspect Element, etc.

You can simply refresh your browser when checking the items in the drop-down menu to return to normal.

Hope this helps. :)

Answer 4

You can also do this in the javascript console:

 $('#foo').trigger('mouseover'); 

A, which "freezes" the element in the "hover" state.

Answer 5

Here's how I do it without CSS or JS changes stopping in Chrome (I'm on a Mac and I don't have a PC in front of me if you work in Win):

• open the developer console.
• until you activate the guidance check tool, but instead open the desired submenu by hovering over it.
• press [Command] + [Shift] + [c]

Now the freeze-checking tool will be applied to the elements that you opened in your navigator.

Answer 6

Not sure if it was present in previous versions of the browser, but I only found out about this extremely simple method.

Open the inspector in Chrome or Firefox, right-click the item you are interested in and select the appropriate option (in this case: hover). This will invoke related CSS.

Screenshots from Firefox 55 and Chrome 61.

Answer 7

change the CSS so that the property that the menu hides is not applied while working on it, this is what I do.

Answer 8

Great stuff!

Thanks for gmo for this tip. I did not know about these attribute settings, very useful.

As a small revision of the wording, I would explain that the process is as follows:

• Right click the item you want style

  • Open the Inspect tool

  • On the right side, go to the tab "Small styles"

  • Found above CSS styles content

  • Select the .hov option - this will give you all the options available for the selected HTML element

  • Click and change all settings so that they are inactive

  • Now select the state that you would like to configure - when you activate any of them, your stylesheet will go directly to these settings:

Styles - Fine Tune - Interactive Elements

This information was my salvation, I can’t believe that I just heard about it!