iOS ignoring tag and respecting :hover

Question

I have a list element with div content inside and an a tag wrapping the div content. Example code:

<li>
  <a href="http://google.com/">
    <div id="tease-info">
      <div class="inset-img-border fade"></div>
      <img src="/img/img.jpg">
      <div id="arrow-right-small"></div>
      <h4 class="title">E-mail Marketing</h4>
      <p class="title">Messaging That Pays</p>
    </div>
  </a>
</li>

In my style sheet, I have a hover being applied to 'tease-info' for interior content. Like so:

  #tease-info:hover h4{
    color: rgb(191,69,164);
  }

The problem comes only in ios. On my ipad, when I tap the li element, I get that grey overlay native to ios, letting you know the element your selecting. I also get the hover state. However, when I release, I am not taken to the href and the hover state remains enabled.

It seems like the hover state is over-ruling the a tag? What is happening?

iOS does not support the `:hover` pseudo-class because it has no concept of hovering. Generally it tries to treat it like a sticky `:active`, but anything more and it'll just bug out because it doesn't really know what to do with it. What if you try applying the hover style to the `a` instead of the `div` (you may need to modify your HTML to that effect)? — BoltClock, Mar 15 '12 at 16:24
I had an element `
` positioned absolutely within the div and a hover applied to it. When I remove this element, all is well and the href is no longer ignored. The weird thing is, I have other absolutely positioned elements in the same div. Not sure what the true cause is/was. — Ryan Dunlap, Mar 15 '12 at 16:50
I have this issue also... it seem to defualt to the hover effect and forget about the original abchor click effect. I may try to disable the hover effect for iOS. will let ya know if i find a fix — nickmorss, Apr 10 '12 at 15:22

score 2 · Accepted Answer · edited May 23 '17 at 10:08

ok i have a fix now. To start with im using Modernizr, and i read a technique which suggested using the .touch and .no-touch class's to fix the issue. this works pretty easily if your :hover event is expressed in CSS

.ugcpost:hover .meta {display:block;} 
.touch .ugcpost:hover .meta {display:none;}

this solves the problem, just make sure you have the touch event in your Modernizr config. another more fleshed out option if you using JS to show and hide your hover, is to force page to follow the href with a single click. there is one issue to note though that you want to ensure your distinguishing between a true click and not a screen scroll. so please see the following JS, again using Modernizr, alough you code just check the client's User agent.

followPost : function(item) {
         $(item).on('touchend', function(e){
                location.href = $(item).attr('href');
                $(item).off('touchend');
             });
             $(item).on('touchmove', function(e){
                 $(item).off('touchend');
             });
     },
     initTouchEnhancements : function() {
        $('.collection a, .post a, .ugcpost a').live('touchstart', function() {
            var item = this
        followPost(item);   
        });
     }

NOTE: this also relies on the use of 'on' and 'off' functions in JQ 1.7. thanks to this post for identifying this. Stop the touchstart performing too quick when scrolling

iOS ignoring tag and respecting :hover

1 Answers1