Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #299520
    j7f4f2a4fds2
    Participant

    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%;
    }

    #299532
    Atelierbram
    Participant

    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; 
    }
    
    #299535
    j7f4f2a4fds2
    Participant

    from @PaulOB over at sitepoint

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

    #299568
    Atelierbram
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.