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.
Related
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.
I have reviewed a few articles about using CMFCButton but I still have a question.
My button has a image on the left and a caption on the right. There is nothing fancy, except I am using WindowsBlinds 10 on my computer (I have deactivated it and the issue remains).
With regular buttons they highlight when the mouse is over them. But this is not so with the CMFCButton. The best I came up with is to set the style to SemiFlat.
Mouse not over control:
Mouse over control:
If I set the style to Style 3D then you see no change at all whether the mouse is over the button or not.
Why is the CMFCButton not following the rules? Is there a setting? I don't want to use owner drawn.
Based on the comments provided I have changed to a CButton as that renders as I need out-of-the-box!
I am creating a simple mobile app with Cordova. For good user experience I would like there to be instant feedback whenever a user presses a button. This should be accomplished with the :active pseudoclass. It mostly works, but it's not quite 'instant'.
See the jsbin here.
With desktop Chrome, clicking the button produces absolutely instant feedback, no question.
With Chrome for Android, tapping the button quickly feels pretty quick, but a slow tap or holding on the button causes a delay (it might be hard to notice, but it is there and it's bugging me).
I think this is something to do with scrolling. If you go to the Android settings, there is a scrolling list of options. These options seem to highlight with a similar delay. However, any native Android buttons which are not within a scrolling list are absolutely instant (for example, the back button in the top right, or save/cancel on a popup dialog).
Is there some way I can convince Chrome that these buttons are not on any kind of scrolling pane and should just be highlighted instantly?
This is probably unrelated, but I have also noticed that holding on an html button highlights it, but then moving your finger (still within the button) causes the highlight to disappear. This does not match the behaviour of native Android buttons, which would stay highlighted so long as you stay within the button.
Edit: I should add that -webkit-tap-highlight-color (which only works with cursor: pointer) is a bit faster than :active, but it's not an acceptable solution, for a few reasons:
The highlight disappears if you hold on the button for more than one second
It clashes with :active - to get sensible results with -webkit-tap-highlight-color you would have to remove :active, which makes no sense
There is no way to control the size/shape of the highlight, which might not match the actual button (sometimes it bleeds around the edge, or has mismatching rounded corners)
The correct HTML way of solving this is :active, and I would like to use that if at all possible.
It seems the best way to solve this is to listen for touch events and set a class:
$('button').on('touchstart', function(e){
$(this).addClass('active');
});
$('button').on('touchend', function(e){
$(this).removeClass('active');
});
To keep this as closely related to the :active pseudoclass, I opted to use a class of active and add styles for both like this:
button:active, button.active {
// active style
}
For more information, see: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
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.
Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?
Now you can see both the pseudo-class style rules and force them on elements.
To see the rules like :hover in the Styles pane click the small dotted box button in the top right.
To force an element into :hover state, right click it.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
It's a little annoying, but you need to right click on the element, and then, keeping your mouse over the link, use your keyboard select the 'Inspect Element' link and press enter. This should show you the css for the hover pseudo class for the selected element.
Here's hoping they make this a little easier in future builds.
In Chrome:
You can also mouseover on an element, and then click CTRL+SHIFT+C to inspect that element.
In Firefox:
in firebug:
source: https://stackoverflow.com/a/11272205/2165415
I'm not sure that I right understand your question but if you want to see the event handler code you can just inspect the element and look at Event Listeners sidebar pane of Elements Panel.
Another way is just press pause button in Scripts Panel and just hover the element.
The debugger will stop at the first instruction of the first event handler.
Please have a look on below link for answer
See :hover state in Chrome Developer Tools