Fix CSS hover on iPhone/iPad/iPod

前端 未结 16 568
星月不相逢
星月不相逢 2020-12-02 14:53

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 :

相关标签:
16条回答
  • 2020-12-02 14:53

    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>
    
    0 讨论(0)
  • 2020-12-02 14:57

    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.

    0 讨论(0)
  • 2020-12-02 14:58

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

    0 讨论(0)
  • 2020-12-02 15:00

    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>
    
    0 讨论(0)
  • 2020-12-02 15:01

    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.

    0 讨论(0)
  • 2020-12-02 15:03

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

    0 讨论(0)
提交回复
热议问题