ios - Fix CSS hover on iPhone/iPad/iPod - Stack Overflow

 

ipad css hover double click

While coding dudmens.gq we ran into double tap behavior twice: with pure CSS main menu drop-downs, hover. So on iPad I had to tap once on parent menu link to display the drop-down, and then tap the second time on some link in the drop-down to go to a new page. I don’t like the idea of making desktop user click twice to go to some. Effectivement, sur les appareils IOS, selon le CSS ajouté, le premier click (ou plutôt "touch") va faire un trigger du hover, tandis que le second, va pour sa part faire un trigger sur le click. En soi, je ne trouve pas cela si mal, cependant l’appareil Android pour sa part ne fera pas cela. Il va directement effectuer le click et non le hover. Feb 15,  · Fix CSS hover on iPhone/iPad/iPod. Ask Question I want to fix the hover effect on iOS (change to touch event) but I dont have any idea. Let me explain this. (Works with 'click', at least.) CSS hover on ios works only if an event listener is assigned. Wrapping the target element in an a[href=trivial] also seems to work.


The Annoying Mobile Double-Tap Link Issue | CSS-Tricks


By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

I have some websites I built times ago, that use jquery mouse events I just got an ipad and i noticed that all the mouse over events are translated in clicks Haven't tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting.

The idea is that Mobile WebKit fires a touchend event at the end of a tap so we listen for that and then redirect the browser as soon as a touchend event has been fired on a link. It is not entirely clear what your question is, but if you just want to eliminate the double click, while retaining the hover effect for the mouse, ipad css hover double click, my advice is to:. In order to simulate a mouse, browsers such as Webkit mobile fire the following events if a user touches and releases a finger on touch screen like iPad source: Touch And Mouse on html5rocks.

It does not seem possible to simply tell the webbrowser to skip the mouse events, ipad css hover double click. What's worse, if a mouseover event changes the page content, the click event is never fired, as explained on Safari Web Content Guide - Handling Eventsin particular figure 6. What exactly a "content change" is, will depend on browser and version, ipad css hover double click. I've found that for iOS 7. This clearly works for mouse events: mouseenter and mouseleave slightly improved versions of mouseover and mouseout are fired, and add and remove the hover.

If the user actually click s a link, the hover effect is also removed. This ensure that it is removed if the user presses the back button in the web browser. This ipad css hover double click works for touch events: on touchstart the hover effect is added. It is '''not''' removed on touchend. It is added again on mouseenterand since this causes no content changes it was already addedthe click event is also fired, and the link is followed without the need for the user to click again!

The ms delay that a browser has between a touchstart event and click is actually put in good use because the hover effect will be shown during this short time. If the user decides to cancel the click, a move of the finger will do so just as normal, ipad css hover double click.

Normally, this is a problem since no mouseleave event is fired, and the hover effect remains in place. Thankfully, this can easily be fixed by removing the hover effect on touchmove.

Note that it is possible to remove the ms delay, for example using the FastClick library ipad css hover double click, but this is out of scope for this ipad css hover double click. Seems there is a CSS solution after all. The reason Safari waits for a second touch is because of the background image or elements you usually assign on the :hover event. If there is none to be shown - you won't have any problems, ipad css hover double click.

The solution is to target iOS platform with secondary CSS file or style in ipad css hover double click of a JS approach which overrides :hover background to inherit for example and keep hidden the elements ipad css hover double click were going to display on mouse over:.

A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers. If the user taps a clickable element, events arrive in ipad css hover double click order: mouseover, mousemove, mousedown, mouseup, and click.

Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent. This behavior allows the user to tap in the new content. So, you could use woop's solution: detect the userAgent, check if it's and iOS device and then bind the event. I ended up using this technique because it suits my needs and it makes more sense do not bind hover events when you don't want it. I think it'd be wise to try mouseenter in place of mouseover.

It's what's used internally when binding to. I had the following problems with the existing solutions, and found something that seems to solve all of them. This assumes you're aiming for something cross browser, cross device, and don't want device sniffing.

Triggering mouseover events on touchstart and mouseout on touchmove has less serious consequences, but does interfere with the usual browser behaviour, for example:. In theory, you could just add a flag with touchmovebut iPhones trigger ipad css hover double click even if there's no movement. In theory, you could just compare the touchstart and touchend event pageX and pageY but on iPhones, there's no touchend pageX or pageY.

In theory, there are ways to get the exact time used for a longpress instead of just using as an approximation, but in practice it's not that simple and it's best to use ipad css hover double click reasonable proxy.

PROBLEM - applying touchend means every time you scroll your finger over an element, it responds as if you've pressed it, even if you were just trying to scroll past. I'm creating an effect with jQuery which fades up a line under some buttons to "highlight" the hovered button. I do not want this to mean you have to press the button twice on touch devices to follow the link. BUT I want touch devices to be able to follow the link on one single click, not two.

I just found out that it works if you add an empty listener, don't ask me why, but I tested it on iPhone and iPad with iOS 9. I "think" that your links have no onmouseover event, where 1 tap activates onmouseover and the double tap activates the link. I don't have an iPad. I had the same problem but not on a touch device. The event triggers every time you click. There is something about event queuing or so.

However, my solution was like this: On click event or touch? If the link is clicked again within X ms, you just return false. However, I prefer using a combination of Modernizr. If you don't use Modernizr, ipad css hover double click, you can simply replace the Modernizr. Also note that testing the user agent iemobile will give you broader range of detected Microsoft mobile devices than Windows Phone. Might not be the most elegant solution, but it works great in my case and utilizes a plugin that I already had in place, and required me to add a single line of code to get my existing events working under these devices.

This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks in some cases.

In CSS, if you have any :hover psudo classes in your css, change them to. Ipad css hover double click this code on an ipad to see how css and js hover method behave differently in hover effect only. The CSS button doesn't have a fancy click alert. In CSS, if you have any :hover in your css, change them to. To get the links working without breaking touch scrolling, I solved this with jQuery Mobile's "tap" event:. None from the other answer works for me. My app ipad css hover double click a lot of event listeners, own checkboxes and links that has listener's and links without listener's.

You could also bind the mouseovers only if the userAgent contains Mozilla, IE, Webkit, or Opera, but you still need to screen for some devices because the Droid, for instance, reports its userAgent string as:. The iPhone's string is similar. If you just screen for iPhone, iPod, iPad, Android and Blackberry you might get the majority of handhelds, but not all of them. Simply make a CSS media query which excludes tablets and mobile devices and put the hover in there. You don't really need jQuery or JavaScript for this.

And be sure to add this to your html head to make sure that it calculates with the actual pixels and not the resolution. Learn more. First 10 Free. Asked 9 years, 2 months ago. Active 7 ipad css hover double click ago. Viewed k times. Francesco Francesco Do you have a code sample? One thing I would suggest you do is to rethink your interface if at all possible.

Just a thought. I agree with "jer". This is an odd question, I don't think the solution here is a "workaround" personally. I think translating a "mouse hover" on a desktop browser to a "finger tap" on a touchscreen browser makes sense. If you agree with that translation, but want one tap instead of two, then I'd probably do feature detection for the iPad events e, ipad css hover double click. I actually consider this translation to be a feature.

If you had hover events setup, there must have been some utility to seeing them. A single tap reveals a hovered element, a second tap follows the link "behind" the hover. Where's my bounty? Patience, Padwan. As of jQuery 1. Well, this solves the initial issue, but creates a new one: When swiping over the are clicked. This is not a solution. This has its flaws. It is not entirely clear what your question is, ipad css hover double click if you just want to eliminate the double click, while retaining the hover effect for the mouse, my advice is to: Add hover effects on touchstart and mouseenter.

Remove hover effects on mouseleaveipad css hover double click, touchmove and click. Background In order to simulate a mouse, browsers such as Webkit mobile fire the following events if a user touches and releases a finger on touch screen like iPad source: Touch And Mouse on html5rocks. Solution Explained To recap: Add hover effects on touchstart and mouseenter. Note that there is no action on touchend!

That's it!

 

jquery - iPad/iPhone hover problem causes the user to double click a link - Stack Overflow

 

ipad css hover double click

 

Feb 15,  · Fix CSS hover on iPhone/iPad/iPod. Ask Question I want to fix the hover effect on iOS (change to touch event) but I dont have any idea. Let me explain this. (Works with 'click', at least.) CSS hover on ios works only if an event listener is assigned. Wrapping the target element in an a[href=trivial] also seems to work. Jan 16,  · I have some websites I built times ago, that use jquery mouse events I just got an ipad and i noticed that all the mouse over events are translated in clicks so for instance i have to do two cl. While coding dudmens.gq we ran into double tap behavior twice: with pure CSS main menu drop-downs, hover. So on iPad I had to tap once on parent menu link to display the drop-down, and then tap the second time on some link in the drop-down to go to a new page. I don’t like the idea of making desktop user click twice to go to some.