Fix CSS hover on iPhone/iPad/iPod

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 :

  • How do I detect wich SKSpriteNode has been touched
  • Why are UIViewController touchesBegan, touchesMoved & touchesEnded only being called when the first of two touches begins, moves or ends?
  • Getting the word touched in a UILabel/UITextView
  • How to get a CGPoint from a tapped location?
  • How can I use Core Graphics to draw a circle at my touch location?
  • How to implement touch events in uiwebview?
  • .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

    12 Solutions Collect From Internet About “Fix CSS hover on iPhone/iPad/iPod”

    Here is a basic, successful use of javascript hover on ios that I made. http://jsfiddle.net/pizzaboy13/u7FL5/

    All the code from the jsfiddle is below since you apperantly can’t have a link to jsfiddle.net without code.

    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>
    

    Add onclick=”” to anything you wish iOS to recognise as an element with a hover.

    <div onclick="">Click Me!</div>
    

    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;
    }
    

    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();
    

    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.

    1. Assigning an event listener to the target element seems to work. (Works with ‘click’, at least.) CSS hover on ios works only if an event listener is assigned

    2. Wrapping the target element in an a[href=trivial] also seems to work. https://stackoverflow.com/a/28792519/1378390

    A related note/diagram on mobile Safari’s algorithm for handling clicks and other events is here: Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?

    In response to Dan (https://stackoverflow.com/a/20048559/4298604), I would recommend a slightly altered version.

    <div onclick="void(0)">Click Me!</div>

    I know it’s an old post, already answered, but I found another solution without adding css classes or doing too much javascript than really needed, and I want to share it, hoping can help someone.

    I found that to enable :hover effect on every kind of elements on a Touch enabled browser, you need to tell him that your elements are clickable.
    To do so you can simply add an empty handler to the click function with javascript or jQuery.

    $('.need-hover').on('click, function(){ });
    

    It’s better if you do so only on Mobile enabled browsers with this snippet:

    // check for css :hover supports and save in a variable
    var supportsTouch = (typeof Touch == "object");
    
    if(supportsTouch){ 
        // not supports :hover
        $('.need-hover').on('click', function(){ });
    }
    

    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”.

    On some sites I need to use css “cursor:help”. Only iOS it gave me a lot of irritation. To solve this, change everything af the page to “cursor:pointer”. That works for me.

    jQuery:

    if (/iP(hone|od|ad)/.test(navigator.platform)) {
    $("*").css({"cursor":"pointer"});
    }
    

    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;
    }