Ad

Using Touchmove To Trigger Hover Event

- 1 answer

I'm relatively new to coding and am running into a particular issue with my website. My homepage has images on it with overlay text hover effect that occurs when a cursor is moved over the image. It works perfectly on desktop, however, not on mobile. I would like for the hover text to appear when the user swipes across the image in any direction. I've done some research and it appears that I should somehow be using jQuery and the touchmove function to make this happen. But I just can't figure it out. I am using Shopify (debut theme) to build my website. Any help will be greatly appreciated!

Here's my CSS for hover event:

//hover effect//
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 99%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
}

.container:hover .overlay {
  opacity: 0.7;
}

.text {
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: pre;
}

Thanks!!!!

Ad

Answer

You'd need to apply a class with the desired effect to the target element. You could do it with Jquery, but javascript is perfectly capable to do it on its own. Something like:

Javascript:

const myTargetElement = document.getElementsByClassName('overlay')[0]; // index to be confirmed

// add hover style
myTargetElement.addEventListener('touchmove', function (e) {
    e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
myTargetElement.addEventListener('touchend', function (e) {
    e.target.classList.remove('hover'); // or whichever class name you'd like
});

CSS:

.container:hover .overlay,
.overlay.hover {
   opacity: 0.7;
}

Note: if you want to target all the elements .overlay on your page with that code, you would need something like:

Javascript:

const myTargetElements = document.getElementsByClassName('overlay');

// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {

    // add hover style
    element.addEventListener('touchmove', function (e) {
        e.target.classList.add('hover'); // or whichever class name you'd like
    });

    // remove hover style on end
    element.addEventListener('touchend', function (e) {
        e.target.classList.remove('hover'); // or whichever class name you'd like
    });
});
Ad
source: stackoverflow.com
Ad