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 :
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>
The hover pseudo class only functions on iOS when applied to a link tag. They do that because there is no hover on a touch device reall. It acts more like the active class. So they can't have one unless its a link going somewhere for usability reasons. Change your div to a link tag and you will have no problem.
Where, I solved this problem by adding the visibility attribute to the CSS code, it works on my website
Original code:
#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}
Fixed iOS touch code:
#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
visibility:hidden;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}
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>
I successfully used
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);
which was documented on http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm
so a variation of Andrew M answer.
Here is a very slight improvement to user1387483's answer using an immediate function:
(function() {
$("*").on( 'touchstart', function() {
$(this).trigger('hover') ;
} ).on('touchend', function() {
$(this).trigger('hover') ;
} ) ;
})() ;
Also, I agree with Boz that this appears to be the "neatest, most compliant solution".