Firefox 46.0.1. I'm using the inspector. I'm a beginner. When I move the mouse around, I get a blue box around the element. I would like to stop the movement so I can use my mouse to move about the lower info boxes.
I found a way of doing this before, but cannot find it now via google. I know this wasn't done via a breakpoint. It was some key press.
answer:
Ok, click on the box with arrow in it; it's on the upper left margin. It turns blue. Move mouse to where you want. Left click. The blue box goes away, but the text below stays frozen.
Supposedly, the answer is here:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
Robert
What are stuck in is often referred to as "Point to Inspect" mode or "Inspect Element" mode. In many browser developer tools, this mode is entered via application menu item, right click context menu, or a button in the developer tools UI. The idea is to help the user see the hovered element in a DOM tree visualization.
Usually, this mode is active until the next left click. When the user left-clicks on an element, it is revealed in the DOM tree view. (Some tools also log the element to console.) So, to get out of the mode, simply click on some element to select it.
Related
I am using a website template, have gone through much of the style sheets and have used the f12 function in chrome. However, the button is ONLY blue when highlighted so I am really struggling to find it and turn it red. Is there a way to keep it blue so I can find it that way or should I look somewhere else?
"Purchase Now" is blue when highlighted
You can try in the Chrome dev tools (F12) you can use "Force element state" to cause an element to behave as though it is hovered. When you have the button element selected, look for ":hov" in the "Styles" tab within the main "Elements" tab. That should let you toggle the :hover state. Hopefully that can let you see the button when it is blue to investigate some more!
In 99% of all cases when I click a link, I do it with the middle mouse button instead of the left mouse button. This, in all browsers I've ever tried, causes the URL to open in a new tab without shifting focus to it, unlike the left click which "destroys" your current page and replaces it with the new page.
When using a:active to style hyperlinks, this only applies to when you left-click it for some bizarre reason.
For example, take this page: https://developer.mozilla.org/en-US/docs/Web/CSS/:active
The example on that page only styles the hyperlink when you left-click it -- not when you middle-click it. It uses :active. I use Pale Moon.
How do I make :active actually style hyperlinks that are clicked, even if the middle mouse button is used?
It confuses me why they would even make such a distinction, since both are the same "event", just with slightly different client behaviours as a result.
It's not an option to start left-clicking links.
This is my project when I am in Inspect Element model in Safari:
You can see the editor.css link on the right.
After I click the link, I come to editor.css detail:
But I don't know how to go back. Some one know how to go to the page (
go to the first snapshot )
Yes, you just click on the first button at superior menu(dev tools menu, reading left to right. It has a reactangle icon). The button next to the inspector button(it is highlithed blue on the first screenshot)
I have edited the CSS on my menu on this site:
So it would display completely across at the font size I want (previously it was turning into a two layer menu). However, now for some reason the submenu under "Show Your Support" is very difficult to click on. When you hover and try to move your mouse down to an option it disappears half the time before you can click on anything.
I have played around with the code in Chrome (inspect element) and I can't seem to find out what is wrong. Can someone assist me, please?
Thank you.
There is a gap between the menu and where the sub-menu appears. See Image below:
When you hover away from the menu item and the mouse is on its way to the sub-menu, the mouse ceases to be on 'hover' (while crossing over the gap) - making the sub-menu disappear.
If you can eliminate the gap (i.e. place where the sub-menu is positioned higher up the page), the 'hover' state will remain on mouse-move and the sub-menu will stay 'shown' for clicking.
Does that help?
PS
posted as an answer (instead of comment) so I could include the image in my explanation.
In your show your support tag, inside add this style
style="padding-bottom:10px;"
So that I am able to operate now without any hover before on click issue. try and let me know. I tried in IE.
I have a button which is styled for various states. Particularly, pressed (:hover:active) and focussed (:focus).
But if the button was focussed and is pressed, it changes to :hover in Google Chrome / Safari or :hover:active in Firefox. Neither go to :hover:active:focus as expected.
HTML test case:
<button>Test</button>
CSS:
button{background:#000000;color:#FFFFFF;border:1px solid #000000;padding:10px}
button:hover{background:#FF0000;color:#000000}
button:active{background:#00FF00}
button:hover:active{background:#FFFF00}
button:focus{background:#0000FF}
button:hover:focus{background:#FF00FF}
button:active:focus{background:#00FFFF}
button:hover:active:focus{background:#FFFFFF}
And here it is in a simple test fiddle: http://jsfiddle.net/CtKs8/. Note that after focussing the button using the keyboard (so it goes blue), pressing it makes it go red in Chrome, or yellow in Firefox (instead of white).
My question is: how can I detect a pressed, focussed element (like :hover:active:focus), or at a minimum get Chrome to use the :active:hover state as Firefox does?
I believe that focus, generally as an event, is not fired at all when you click on a button. It is fired when you keep pressing Tab until you reach desired element.
Text input's and textarea's are exceptions, since they're focused when clicked.
I couldn't find clear explanation in events documentation but HERE you can see Focus Event Types documentation. One chapter down there is completely separate chapter Mouse Event Types which suggests that mouse behaviours are not related to focus events.
EDIT:
I read your question carefully once again and now I think I finally understand your problem.
When it comes to a button, there is no such state as :active:hover:focus. If a button is focused it becomes blur immediately after you clik on it (to be precise - after you just mousedown on it). So there's no way to put button both in active and focus states together.
According to the red color on Chrome/Safari when you click on a focused button, I guess this is a bug. If you bind a simple handler to the button click like here you'll see that clicking on a focused button works. I don't know why :active is not triggered.