Hover event, but not on touch/mobile devices

[j7f4f2a4fds2]

Hi All,

I am trying to create a hover event that shows an image. On my desktop/laptop it fires correctly. However on a mobile (touch), the image only appears when the modal link is clicked, then it is sticky (it stays on screen).

On mobile or touch-screens, i don’t want the hover event to fire.

Here is what i am working with.

https://jsfiddle.net/postcolonialboy/pxwd34ka/4/

HTML
Hover to show image

$(“#test-parent”).hover(function() {
$(“#test-child”).fadeToggle();
});

CSS
.preview {
display: none;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
height: 50%;
}

[Atelierbram]

Can be done with just CSS, no javaScript needed:

.preview {
  /* display: none; */
  opacity: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  height: 50%;
  transition: all .3s;
}

[id="test-parent"]:hover ~ .preview { 
  opacity: 1; 
}

[j7f4f2a4fds2]

from @PaulOB over at sitepoint

if (!(“ontouchstart” in document.documentElement)) {
$(“#test-parent”).hover(function() {
$(“#test-child”).fadeToggle();
});
}

[Atelierbram]

If there is a reason javaScript and jQuery is needed in your use case, … I can’t think of any.

[Author]

Posts