The use case is that I have to display menu items when user hover on a particular row. It seems that it is not working properly on iPad. Is there any work around for that?
Help appreciated, Thanks
These following are not supported on iOS
Mouse-over events
The user cannot “mouse-over” a nonclickable element on iOS. The element must be clickable for a mouseover event to occur as described in “One-Finger Events.”
Hover styles
Since a mouseover event is sent only before a mousedown event, hover styles are displayed only if the user touches and holds a clickable element with a hover style. Read “Handling Events” for all the events generated by gestures on iOS.
This implies that :hover is only supported on clickable elements. Clickable events are defined here as:
A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers.
With that said, if you want to provide a consistent and reliable user experience on iOS, your best bet is to design for touch, since that's what it's made for. This is a part of the answer from previously asked questions
Related
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/
my website is using a pure CSS3 dropdown menu. The problem is when the website is view on touch screen device, some of the menu item with hover property doesn't auto drop down.
How can I change it to be like, if the menu item has a hover dropdown, in touch screen devices you have to touch it then the menu will drop down where else in our PC it will still remain the hover effect.
Can it be done by using CSS only?
Have you tried using aria-haspopup to simulate hover on touch-enabled devices
Take a look at this article.
On a page element such as a menu, set the element's aria-haspopup
property to "true". When an Internet Explorer 10 user on a
touch-enabled device first taps the page element, the user's
experience will be identical to that of a user who hovers over the
element with a cursor.
I'm not sure what the browser support for this is like though.
"hover" is not really a feature of touchscreens since it needs to have a mouse pointer involved. If you are using a good library that supports touchscreens, it should also work. If not, try another library or write something your own.
I have just come across a weird CSS quirk that goes far beyond my understanding and would appreciate some help:
I was trying to build a fancy pure css dropdown solution using the clickable event method Ryan Collins proposed: http://www.ryancollins.me/?p=1041
With :active and :hover and some nested divs we may make trigger spans (or divs or whatever) that cause a sister element in the same container to appear upon mouse click. The example on Ryans page worked on my ipad so I assumed that iOS was smart enough to handle a touch event as triggering the :active state - and if the trigger contains a hyperlink this works, but there is no way to deactivate the active state of a hyperlink, safe for clicking on another hyperlink.
This sucks, because my plan to have an elegant navigation (and some other stuff) pop up and hide from view with just css is foiled, the menu never collapses - but then why does the example on Ryan's page work? I did some testing and finally narrowed the key element down to a twitter widget he has embedded on his page. Some javascript styles the embedded tweet and in doing so, it affects the very :active and : hover solution that all of a sudden works via touch on iOS, even without hyperlinks.
Can anybody tell me what causes this behavior and if I could emulate it without relying on a crazy hack like embedding a twitter widget and hiding it from view?
Found the answer myself with some more digging through the code and a little Google help:
The twitter widget among all the proprietary stuff it does also declares a touchstart event, which by itself anywhere on the page is enough to make mobile safari utilize the CSS :active pseudo style.
http://miniapps.co.uk/blog/post/enable-css-active-pseudo-styles-in-mobile-safari/
In Google Chrome, the CSS hover state isn't being triggered when the left mouse button is held down, as shown here:
a:hover {
color: red;
}
words
http://jsfiddle.net/RHGG6/1/
This issue doesn't occur in either FF8 or IE9. It's problematic because I'm implementing a drag-and-drop action and using CSS to highlight the drop target. I could do this pretty trivially in JavaScript, but that seems heavy-handed for what is essentially a CSS problem. Are there any workarounds to this?
From a little playing around, it seems that Chrome 30.0.1599.69 m on windows7 doesn't generate a mouseenter event if the left button is held when moving over an element. As such, relying on the onmouseenter event gives the same result as using css - perhaps this (non-triggered) event is used to signal the css engine that something needs to change.
Anyhow, you can just add code to handle mousemove and mouseout events. I simply set the text colour with the js, though something that toggled a class would probably be a better option. At least the js will be using the time that the css should have been using, so it won't all be overhead, although it does suck redoing it all anytime the mouse moves.
Perhaps you could use removeEventListener from inside the handler you're trying to remove. If so, you could attach the js to handle the events with addEventListener, attaching to both events on page load. When the onmousemove event was triggered, you could change the style and then remove the handler. Then, when the mouseout event fired, you could restore the style and re-attach the onmove handler. I wouldn't be surprised if trying to remove a handler from an event, from within the handler itself would fail, but one can only try. It would only add a few bytes to the js, but would improve efficiency (in terms of the link, not the whole page) tremendously - from potentially very poor if the mouse was moved over the link a lot to 100% - i.e the style is set exactly once and cleared exactly once per enter/leave cycle.
words
Works for me - Note: only tested with chrome in win7.
I checked in Safari and Opera as well and they behave just like IE9 and Firefox. It seems Chrome is the only browser that behaves this way. The only way I was able to get the desired behavior was using Javascript. The suggestions with the :active pseudo class definitely don't work, I think they misunderstand the problem. Strangely, :hover in Chrome works when the right mouse button is being held down and not when the left button is. Go figure.
The link turns red when I mouseover it using Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, so you might want to update your Chrome.
On a related note, the :hover pseudo-class applies to an element being HOVERED by a mouse pointer. For a style to apply while the mouse button is held down while clicking the link, use the :active pseudo-class. I'm not sure why FF and IE behave differently.
When you're left mouse button is down, isn't the element supposed to be in the active state? The difference here is that Firefox and IE are allowing the active state to be inherited from the hover state, and Chrome is not. In CSS, the active state can be controlled using the :active pseudo-class. You need to explicitly set the style for the active state to ensure consistency between browsers.
Nowadays (2018), while the bug still persists in Chrome, you can work around it using HTML5 drag&drop's dragenter and dragleave events. If you have a nested dom-element you can apply a counter to mitigate the dragleave events that occur when the mouse gets over a child element.
var h1 = document.querySelector('h1')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add('dragover')
h1.ondragleave = _=> --counter || h1.classList.remove('dragover')
span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
<h1>hover over me<span>, and me</span></h1>
<h2 draggable=true>drag me</h2>
You're looking for the :active pseudo-class. :hover will only activate when the node is being hovered over by the mouse. :active will only trigger when the node has been selected or clicked on.
Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/
I have a site where the background-image jumps up on hover state and I can't for the life of me find the specific css that does this.
I'm able to get to the "offending" link and give it a border and change the padding and margin. The problem is that firebug and chrome inspect does not show me what happens on the hover state.
So I want a way to see what additions to the normal css state happens on :hover.
Any pointers?
(P.S. IE 8 doesn't have this issue - ie no jumping of background image)
Try using the Inspect function in FireBug to focus in on the element in question. It will show you all related CSS, including any CSS that is related to :hover. You can also see in this way what changes happen to the elements CSS (and any other DOM attribute) when you hover your mouse.
In case the changes are coming from some JavaScript, try out the Visual Event bookmarklet. Activating it on the page will let you see all events that are tied to the element in question.