Safari iphone/ipad mouse hover on new link after prior one is replaced with javascript
The problem is that when you replace the content in place, Mobile Safari treats the new elements as if they were the old ones, because they occupy the same position in the DOM. One workaround is to remove the old elements first, then add the new elements asynchronously. The simplest way to do this is using setTimeout()
.
http://jsfiddle.net/chad/JNZvu/10/
// When we click on an answer
$('body').on('click', '.answer', function(){
// don't follow it's link
event.preventDefault();
// fade out the container
$('.container').fadeOut(function(){
// remove old elements (happens after fadeOut because we are in the callback)
$('.container').html('');
// add new elements asynchronously and fade container back in.
setTimeout( '$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0);
});
});
When doing this for real, the fadeOut would be called at the same time as the AJAX function, and then the removal/addition would happen in the AJAX callback.
iOS automatic hover fix?
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>iPad Experiment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(navigator.platform == "iPad") {
$("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
var onClick; // this will be a function
var firstClick = function() {
onClick = secondClick;
return false;
};
var secondClick = function() {
onClick = firstClick;
return true;
};
onClick = firstClick;
$(this).click(function() {
return onClick();
});
});
}
});
</script>
<style type="text/css">
a:hover {
color:white;
background:#FF00FF;
}
</style>
<body>
<a href="http://google.ca">Google</a>
<a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>
... or check out the demo on my web site. Note that it's set up to only work its magic on the iPad - detecting all versions of the iOS is another question in my books ;)
It works on the basis of the fact that...
After you click a link on the iphone or ipad, it leaves a simulated mouse hover that triggers the a:hover css styling on that link. If the link has a javascript handler that keeps you on same page, the hover state will not change until you click on another link.
Citation: Safari iphone/ipad “mouse hover” on new link after prior one is replaced with javascript
iPad/iPhone hover problem causes the user to double click a link
Haven't tested this fully but since iOS fires touch events, this could work, assuming you are in a jQuery setting.
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
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.
A click in iOS Safari triggers a hover state on element underneath where you tapped
If you have option to disable hover then you can do that with bit of hack.
First add this line in "DOMContentLoaded" event handler.
var canHover = !(matchMedia('(hover: none)').matches);
if (canHover) {
document.body.classList.add('can-hover');
}
It will add .can-hover class to body of your html document.
Then just edit a:hover rule to match this instead
your css rule:
a:hover {
color: red;
}
should be:
.can-hover a:hover {
color: red;
}
this should prevent devices with touch screen to apply hover style to any anchor.
Fix CSS hover on iPhone/iPad/iPod
Here is a basic, successful use of javascript hover on ios that I made:
Note: I used jQuery, which is hopefully ok for you.
JavaScript:
$(document).ready(function(){
// Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
$(".mm").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});
CSS:
.mm { color:#000; padding:15px; }
HTML:
<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>
Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?
I found that ":hover" is unpredictable in iPhone/iPad Safari. Sometimes tap on element make that element ":hover", while sometimes it drifts to other elements.
For the time being, I just have a "no-touch" class at body.
<body class="yui3-skin-sam no-touch">
...
</body>
And have all CSS rules with ":hover" below ".no-touch":
.no-touch my:hover{
color: red;
}
Somewhere in the page, I have javascript to remove no-touch class from body.
if ('ontouchstart' in document) {
Y.one('body').removeClass('no-touch');
}
This doesn't look perfect, but it works anyway.
:hover on ios mobile devices turns into double-touch instead of hover
iOS will not trigger a link click event on the first tap if the :hover
state either:
- Has a CSS
transition
animation - Reveals child content (such as a submenu, tooltip or
::before
/::after
element)
In both cases the first tap will trigger the :hover
state and a second tap will trigger the link (or click event).
If you remove the animation or the child elements you should get it to trigger within a single tap.
This great article from CSS Tricks digs a bit deeper into the issue:
The Annoying Mobile Double-Tap Link Issue
How to trigger Mouse-Over on iPhone?
The answer is in the documentation that Remus posted. If you add an onclick = "void(0)" declaration, you will instruct Mobile Safari that the element is clickable, and you will gain access to the mouseover event on that element.
More info here
How to achieve hover state in iPad / iPhone links?
Here is an article that talks about the iOS :hover/double tap issue .
CSS :hover not working on iOS Safari and Chrome
I found a workaround: if you add onclick=""
to the div, the hover will work.
Your html would be:
<link rel="stylesheet" href="hover.css" type="text/css"/>
<div class="video_wrap update">
<div class="content">
<div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
<div class="title_wrap" onclick=""><div class="title">bang bang</div></div>
</div>
</div>
Related Topics
Using Modernizr and Jquery to Animate If CSS3 Transitions Don't Exist
Angular App Not Loading CSS and Js on Refreshing Page
Nav-Collapse Not Working [Twitter Bootstrap]
Align Select-Options Text to Right
Ios: Disable Bounce Scroll But Allow Normal Scrolling
How to Change <Body> Tag Style from Child Component
Detect Support for Background-Size: Cover
Where in the HTML File Should Jquery and Bootstrap Be Placed
How to Disable Caching of Static Assets Like .CSS and .Js in Jsf2
How to Find Element Has Specific Color Using Jquery
Jquery Select a Div with a Certain Class, That Doesn't Have Another Class
Modify CSS Classes Using JavaScript
How to Monitor Requests on Wkwebview
How to Have HTML-Webpack-Plugin Generate <Style> Elements from CSS