Maintain the hover functionality for touchscreens

Currently, I am developing a website with a feed of images using Instafeed.js. The process of pulling the images, likes, and comments is functioning smoothly.

I have implemented a hover effect that displays the number of likes and comments on an image. You can view the effect here: 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>

Due to limitations on mobile devices, the current setup does not work as intended. Tapping directly leads to the link, which is not the desired behavior.

My goal is to activate the hover effect on the first tap, and only navigate to the link upon a second tap by the user.

I came across this resource http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/ that seems to offer a solution to my issue. However, I am having trouble implementing it, particularly with the hide/show hover functionality.

htmlcsshovertouch

Answer №1

Presenting the solution:

JQuery:

$('.insta-post').on("touchstart", function(e) {
  "use strict"; //for code quality
  var link = $(this); //select the link in advance
  if (link.hasClass('hasHover')) {
    return true;
  } else {
    link.addClass("hasHover");
    $('.insta-post').not(this).removeClass("hasHover");
    e.preventDefault();
    return false; 
  }
});

CSS:

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

Check out the updated JSFiddle

Try it on a touch device, or use debug tools like Chrome’s web inspector, which can simulate touch events.


PS: Thank you for sharing such a useful link. I truly appreciate it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

javascriptphpjqueryhtmlhttp-redirect

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox

Choose items in a particular order based on the class name of their category

How can I dynamically select and manipulate groups of elements? My intention is to select and modify the msgpvtstyleme elements, then select the msgpvtstyle elements separately and work with them as well. The ultimate goal is to apply classes to these grou ...

javascriptjquerycss

Using only HTML and CSS, part of the text should transition in a Carousel without the use of JavaScript or jQuery

Looking to create a Carousel with changing text at a fixed interval, focusing on topics like mobile IoT application development and transport products. Currently utilizing the Aurelia framework. $('#carouselExampleSlidesOnly').carousel({ int ...

jqueryhtmlcsscarouselaurelia

"Utilizing a background image within an email using a table data cell (

Struggling to add a background image quickly for a cell within a table in order to showcase dynamic text on top of it I attempted : <td style="background-image:url('bla... But it's not working as expected. What would be the most effective m ...

htmlcssgmail

Image showcasing the background

I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...

cssreactjsnext.jsbackground-image

Upon the initial gallery load, the images are appearing on top of each

Currently, I am working on creating a gallery page for my website using the Isotop filtering plugin. To view the live gallery, you can visit: carroofies.com/gallery The main issue I am encountering is with the initial load of the page, where the images ov ...

htmlcssoverflow

Complete a form when a link or button on the webpage is clicked

I have a variety of links and buttons on my webpage, and they are generated dynamically. I am unable to assign an onclick event to each one individually. My goal is to submit form data to the next page whenever any link or button on the page is clicked. ...

javascriptjqueryhtml

Positioning a button in the top right corner with Bootstrap 4

For a header design, I need to position the language selector in the top right corner and have a logo image on the left side. Below these elements, there should be a row of links that spans the entire width. Normally, this setup would work fine, but when ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Tips on finding the key associated with a specific value

When a form is submitted, one of the fields being sent is an ID number instead of the name for easier processing by the server. For example: HTML dropdown select <select ng-model="myColor" class="form-control" ng-options = "color.ID as color.color ...

javascripthtmlangularjsjsonangular-ngmodel

Utilizing HTML5 data attributes to store intricate JSON objects and manipulate them using JavaScript

Recently, I encountered a unique challenge that I set for myself... I am currently in the process of developing an advanced ajax content loader plugin that comes with an array of options and callbacks. In order to streamline the initialization process and ...

javascriptjsonhtml

When the tab on my website is clicked, the fontawesome icons elegantly transition into their designated positions

When my website loads, some of the fontawesome icons pop in after the animations finish. Specifically, two out of four icons used for visual representation of my skills (such as 'Sound Design' with a headphones picture) pop in when it gets to the ...

javascriptjqueryhtmlcss

Regular expression for validating passwords will be disregarded

I crafted this javascript and html code to validate the username and password input. Strangely, the regular expression for the password is not being acknowledged. function checkDetails() { var uname = document.getElementById("uname").value; var pass ...

javascriptjqueryhtmlcssregex

The modals are all tangled up and now spilling over the edges

The modals in the project seem to have stopped working for some unknown reason. They were functioning properly a few days ago, but now they appear to be broken. The container div is overflowing. Here is a snippet of HTML code I have been using since the ...

htmlbootstrap-4

What is the best way to access the overlay dropdown menu from outside a responsive table?

My situation involves using a bootstrap dropdown multi-select within a td element, and also utilizing the table responsive class. However, due to this combination, the dropdown is not displaying correctly. The responsive "overflow: hidden" property is caus ...

htmlresponsive

Animated mosaic pattern menu design

Is there a way to achieve this effect with a sketch? Note: I would like to add hover animation to the borders if possible. I attempted to do it using the following code: clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%); However, the shapes created by ...

javascriptjqueryhtmlcsssvg

Seeking to implement a feature where Javascript adds input from a form into an HTML table in real-time?

Attempting to achieve this goal involves creating an array that holds an object with instance variables related to form input. After that, the next step is to add whatever was submitted from the form to the table. However, upon calling the function to acco ...

javascripthtmlcssbootstrap-4

Ways to choose a distant relative in XML using XPath

To target all direct <p>...</p> elements inside a div, the selector would be div/p If I wish to select all second-level nested <p>...</p> tags within a div, I could use div/*/p Can a specific range be specified instead? div/descen ...

htmlseleniumxpath

Tips for capturing audio on a smartphone browser?

Looking to capture audio in the browser on both iOS and Android devices. What solutions are currently available (as of October 2013)? What is the rate of acceptance of WebRTC by various browser developers? ...

ioshtmlmobileaudiowebrtc

Create an animated text effect in CSS that bounces back and forth like a marquee for displaying long text

Could you kindly assist me with a solution for displaying auto-moving text (similar to a marquee with alternative behavior) on a label that contains lengthy text? https://i.sstatic.net/hEEgO.jpg I have noticed that the Created On: 28 Nov, 2017 label in s ...

javascriptcsssapui5