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?

Answer 1

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