Fix CSS hover on iPhone/iPad/iPod
Solution 1
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>
Solution 2
Add onclick="" to anything you wish iOS to recognise as an element with a hover.
<div onclick="">Click Me!</div>
Solution 3
Some people don't know about this. You can apply it on div:hover
and working on iPhone .
Add the following css to the element with :hover
effect
.mm {
cursor: pointer;
}
Solution 4
The onclick="" was very temperamental when I attempted using it.
Using :active css for tap events; just place this into your header:
<script>
document.addEventListener("touchstart", function() {},false);
</script>
Solution 5
I"m not sure if this will have a huge impact on performance but this has done the trick for me in the past:
var mobileHover = function () {
$('*').on('touchstart', function () {
$(this).trigger('hover');
}).on('touchend', function () {
$(this).trigger('hover');
});
};
mobileHover();
Admin
Updated on November 09, 2020Comments
-
Admin over 3 years
I want to fix the hover effect on iOS ( change to touch event ) but I dont have any idea . Let me explain this . You have a text in your page :
<div class="mm">hello world</div>
With style :
.mm { color:#000; padding:15px; } .mm:hover { background:#ddd; }
Ok , in dekstop if you put your mouse over the text you get a #ddd background , right ? But in iOS if you touch the text you get nothing but if you tap it it gets a ugly and sticky #ddd background which is not nice and I want the user get the hover effect when he touch that text ( something like touchevent I think ) . But I see some websites fixed that like freemyappps.com or ( please check this site ->D4F on your ios device and touch something to see the hover effect like eating a cake :) ) But how these sites fixed that ? How can fix like them ? Thanks