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>
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>
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
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.
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
How do i fix :hover on iPhone if there is no a element?
You can fix this by using JavaScript.
The following script will add hover as class to the <li>
element:
<script type="text/javascript">
$("li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
</script>
Just add li.hover
where you got li:hover
in your CSS like this:
This:
ul li:hover ul{
display:block;
}
Will be:
ul li:hover ul,
ul li.hover ul,{
display:block;
}
jQuery Documentation:
http://api.jquery.com/hover/
http://api.jquery.com/addClass/
Related Topics
How to Mask a Square Image into an Image with Round Corners in iOS
iOS 7 Status Bar Collides with Navigationbar
Which Has Faster Performance Indexesofobjectspassingtest or Filteredarrayusingpredicate
How to Add Images for Different Screen Size from Assets.Xcassets in Xcode 8
Cannot Put a Google Maps Gmsmapview in a Subview of Main Main View
Add Child View Controller to Current View Controller
Custom Rounding Corners on Uiview
How to Add Badges on Uibarbutton Item
Failed to Emit Precompiled Header for Bridging Header
iOS Enterprise Distribution Through Ota
Storing Images Locally on an iOS Device
iOS 8 Swift - Tableview with Embedded Collectionview
Optional Binding with Try? and As? Still Produces an Optional Type
How to Programmatically Enable Guided Access (Kiosk Mode) on an Iphone
Swift Countelements() Return Incorrect Value When Count Flag Emoji
How to Detect One Button in Tableview Cell
Creating a Reusable Uiview with Xib (And Loading from Storyboard)