I have popup window, appearing on my site when mouse is hover on some object. Once this happens I can press (in Chrome) Ctrl-Shift-C and activate element selection mode and select any element inside popup window. But once I made selection, web page goes to normal flow and popup window immediately disappears since mouse is not in correct position anymore.
Is it possible to overcome this situation somehow? For example, select element, but not terminate selection mode?
Both Chrome and Firefox have the ability, in their respective DevTools, to set, and keep set, pseudo-classes like hover, active and focus. This allows you to work with the page as if the mouse was interacting with the element(s) for which you change a pseudo-class.
The following show toggling the hover pseudo-class on the Documentation link in the SO top-nav bar.
Here is what it looks like in Chrome:
Here is what it looks like in Firefox:
I added tabindex="0" to add the ability for users to tab to this div and use the keyboard to interact with it. Upon click or hitting enter/space when it's active, a popup div is presented. The focus style it applies to the div upon hitting tab is fine, but I noticed when users click on the div to activate it, the focus style is applied to it at that time as well. If they hold the mouse down the focus style is applied to it.
How can I only provide a visual focus for this div when the user tabbed to it, but don't show the focus when the user clicked on it?
I am currently removing focus via .blur() when it's activated but there is still a flash of this focus style and it's always visible while the user is holding the mouse down.
A similar interface that exhibits the desired behavior is the Pages app on iCloud.com. You can tab to focus the different icons in the toolbar, then when you tab to your name and hit return/space, a popup appears and the focus on your name is removed. At that point the name text color changes to a darker gray. If you clicked on your name instead of using the keyboard, you never see the focus that is applied to your name, you only see the text color change when the popup is presented.
For focusable elements, you should always use tabindex="0" (See "Keyboard Navigation Between Components (The Tab Sequence)") so that the focus happens in the correct DOM order - otherwise the tabindex itself can lead to additional usability/accessibility problems.
If you want it to be focusable, then you definitely want the focus outline to appear when the user clicks it too because click events can be triggered by assistive technology that acts like a keyboard and you want sighted users to be able to see where they are at all times.
One solution is to use outline: 0 for the :focus and :active pseudo-classes and then use your own background images to present the different looks you want.
A second solution, which should only be used in the case of a popup that does not have a visible close button, but is dismissed by clicking outside of the popup or by pressing a keyboard command, is to detect the use of the mouse and then blur the element so as to remove the focus outline.
A custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.
:focus-visible is what you are looking for
I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.
The way I implemented it is like this:
.your-element's-classname:focus:not(:focus-visible) { outline: none; }
When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.
You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.
I am using Firefox 28.0 and the newest Firebug for 28. When I hover over a menu button I click the Style panel tab and choose :hover from the options, but it does not lock into hover state. In fact it does nothing. I have tried variations of using :active and clicking Only Show Applied Styles but nothing.
I am sure this is some simple thing going on here, but it's really annoying not being able to use :hover, despite it being selected.
Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.
I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar, which pops up below on hover of its parent item.
The popup (or down) isn't quite styled how I'd like, so I right-click > inspect element to see what's coming from where exactly, and get a better idea of how to achieve my desired effect.
However, as soon as I move my mouse away from the menu, it's gone; thus I can't select different elements in the inspection pane, and see which area is highlighted at the same time.
Is there a way around this, without changing the menu, so that it stays 'popped up' once activated?
If the hover element is triggered by JS (if triggered by CSS :hover, see gmo's answer), you can inspect it if you pause script execution. This is a much simpler way of freezing the DOM than the other answers suggest. You can pause script execution without losing the hover element as follows:
1. Via a keyboard shortcut
Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:
Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8 (there may also be another depending on your OS).
Interact with the UI to get the element to appear.
Hit F8.
Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
2. Via a delayed debugger statement
Some web pages attach keydown / keypress / keyup event listeners which interfere with the shortcut above. In those cases, you can pause script execution by triggering a debugger statement while the hover is open:
Open the JS console, and enter:
// Pause script execution in 5 seconds
setTimeout(() => { debugger; }, 5000)
Trigger the hover and wait for the debugger statement to execute.
If the hover effect is given with CSS then yes, I normally use two options to get this:
One, to see the hover effect when the mouse leave the hover area:
Open the inspector in docked window and increase the width until reach your HTML element, then right click and the popup menu must be over the inspector zone... then when you move the mouse over the inspector view, the hover effect keep activated in the document.
Two, to keep the hover effect even if the mouse is not over the HTML element, open the inspector, go to Styles TAB and click in the upper right icon that says Toggle Element State...(dotted rectangle with an arrow) There you can manually activate the Hover Event (among others) with the checkbox provided.
If it's not clear at all, let me know and I can add a few screenshots.
Edited: screenshot added.
And finally and as I say at the begining, I only be able to do this if the hover is set with CSS:HOVER... when you control the hover state with jQuery.onMouseOver for example, only works (sometimes), the method One.
Hope it helps.
What worked for me is selecting the specific a tag I wanted to inspect and configure it to break on attribute modification:
After doing the above, I would again normally select that a tag then the dropdown will automatically stay as-is even when I mouseover to other places like Inspect Element, etc.
You can just refresh the browser when doing inspecting the menu dropdown elements to go back to normal state.
Hope this helps. :)
You can also do this in the javascript console:
$('#foo').trigger('mouseover');
An that will "freeze" the element in the "hover" state.
Here's how I do it with no CSS changes or JS pausing in Chrome (I am on a Mac and do not have a PC in front of me if you are running on Win):
have your developer console open.
do not enable the hover inspection tool yet, but instead open up your desired sub menu by moving your mouse over it.
hit Command+Shift+C (Mac) or Ctrl+Shift+C (Win/Linux)
now the hover inspection tool will apply to the elements you have opened in your sub-nav.
Open Inspect element
Now go to elements now on right side and select hover
It will show all hover effects
Not sure if it was present in previous browser revisions, but I just found out this extremely simple method.
Open the inspector in chrome or Firefox, right click on the element you are interested in, and select the appropriate option (in this case: hover).
This will trigger the associated CSS.
Screenshots from Firefox 55 and chromium 61.
I needed to do this, but the element I was trying to inspect was added and removed dynamically based on hover state of another element. My solution is similar to this one, but that didn't quite work for me.
So here's what I did:
Add simple script to enter debugger mode upon mouseover of the element that triggers the hover event you're concerned about.
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
debugger;
});
Then, with the dev console open in Chrome, hover over your element, and you will enter debugger mode. Navigate over to the sources section of the dev tools, and click the "Resume script execution" button (the blue play-like button below).
Once you do that, your DOM will be paused in the hover state, and you can use the element inspector to inspect all the elements as they exist in that state.
I found a very simple way to do this if for some reason you have problems with script pausing:
Open Dev Tools on "inspect"-tab.Hover to make the pop-up appear.Right-click on the desired element in your pop-up and press 'Q' (in Firefox) to inspect that element.Use keyboard to navigate: Arrow Up/Down: Move between elementsArrow Left/Right: Collapse/ExpandTab/Shift+Tab: Move between inspector and CSS rules and inside CSS RulesEnter: Edit CSS Rule
Excellent stuff!
Thank you to gmo for that advice. I did not know about those attribute settings massively helpful.
As a small revision to the wording I would explain that process as follows:
Right Click on the element you would like to style
Open 'Inspect' tool
On right hand side, navigate to the small Styles tab
Found above CSS stylesheet contents
Select the .hov option - This will give you all the settings
available for the selected HTML element
Click and Change all options to be inactive
Now Select the state that you would like to tweak - On activation of any of these, your Stylesheet will jump you directly to those settings:
Styles - Tweaking Filters - Interactive elements
This information was a lifesaver for me, cannot believe I have just heard about it!
Change the CSS so that the property which hides the menu isn't applied while you work on it is what I do.
There are times when looking at a computed style in Firebug, it's not evident how a value is computed or what its origins are. In some situations, the source is the browser's default. In web sites that are already constructed, it's not feasible to inject a css reset which will result in breaking all the pages.
Is there a way in Firebug, Web Developer or another extension to display an inheritance structure all the way to the browser's default including displaying the value of the default?
Click on the down arrow on the Style tab in the right panel of Firebug. Uncheck "Show Computed Style" and check "Show User Agent CSS".
The blue filename next to each selector is the CSS file where the selector is defined. The Firefox default CSS file is called html.css and its location (when you hover over it) is resource://gre/res/html.css, that's how you know it is the browser default.
Turn off Show Computed Style.
It then breaks it down by declarations and classes and Browser Defaults. It is that little arrow when you hover over Style.
Also, Turn on 'Show User Agent CSS'.