CODEWITHSUNDEEP
htmlcsshovertouch
Jacob K
Jacob K

Reputation: 436

Preserve hover effect on touchscreen

I'm working on a site containing a feed of images using Instsfeed.js. Pulling the images, likes, comments and everything works fine.

I made a hover effect that overlays the number of likes and comments on a picture like so: https://jsfiddle.net/9w1neq9m/3/

#instafeed {
  margin-top: 30px;
  text-align: center;
  font-family: 'brandon-grotesque', sans-serif;
}
.insta-post {
  display: inline-block;
  margin: 0 10px 20px 10px;
  position: relative;
}
.insta-hover {
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, .5);
  color: white;
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  padding: 0 15px;
}
.insta-hover .fa:last-of-type {
  padding-left: 15px
}
.insta-post:hover .insta-hover {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
<div id="instafeed">
  <div class="insta-post">
    <a href="#" target="_blank">
      <div class="insta-hover">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam libero, blandit at odio et, fermentum luctus massa. Sed et tortor volutpat, semper orci sit amet, venenatis metus. Nullam scelerisque sem at risus maximus sodales.</p>
        <p><i class="fa fa-heart" aria-hidden="true"></i> 130 <i class="fa fa-comment" aria-hidden="true"></i> 29</p>
      </div>
      <img src="https://unsplash.it/300/300" alt="Image from Instagram">
    </a>
  </div>

  <div class="insta-post">
    <a href="#" target="_blank">
      <div class="insta-hover">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam libero, blandit at odio et, fermentum luctus massa. Sed et tortor volutpat, semper orci sit amet, venenatis metus. Nullam scelerisque sem at risus maximus sodales.</p>
        <p><i class="fa fa-heart" aria-hidden="true"></i> 130 <i class="fa fa-comment" aria-hidden="true"></i> 29</p>
      </div>
      <img src="https://unsplash.it/300/300" alt="Image from Instagram">
    </a>
  </div>
</div>

Obviously this doesn't work on mobile devices. A tap goes straight to the link (as you'd expect..) but that's not really what i'm going for.

I want first tap to active the hover effect and then, if the user taps again, the link to actually work.

I found this http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/ that seems to be doing exactly what i want - i just can't get it to work. The whole hide/show hover thing throws me off..

Upvotes: 1

Views: 2125

Answers (1)

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

Here you go:

jQuery:

$('.insta-post').on("touchstart", function(e) {
  "use strict"; //satisfy the code inspectors
  var link = $(this); //preselect the link
  if (link.hasClass('hasHover')) {
    return true;
  } else {
    link.addClass("hasHover");
    $('.insta-post').not(this).removeClass("hasHover");
    e.preventDefault();
    return false; //extra, and to make sure the function has consistent return points
  }
});

CSS:

.insta-post:hover .insta-hover,
.insta-post.hasHover .insta-hover {
  opacity: 1;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

Updated JSFiddle

Visit it using a touch device, or using debug tools like Chrome’s web inspector, which can simulate touch.


PS: thanks a lot for sharing such useful link as I really need this kind of plugin.

Upvotes: 2

Related Questions