Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member
    Join Date
    Jun 2014
    Posts
    48
    Member #
    39433
    Liked
    1 times

    Hover event, but not on touch/mobile devices

    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.

    Jsfiddle

    HTML
    HTML Code:
    <a href="#test" id="test-parent">Hover to show image</a>
    
    <img class="preview" id="test-child" src="https://mayvers.com.au/wp-content/uploads/2017/09/test-image.jpg" />
    
    <script>
      $("#test-parent").hover(function() {
        $("#test-child").fadeToggle();
      });
    </script>

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

  2.  

  3. #2
    Member
    Join Date
    Jun 2014
    Posts
    48
    Member #
    39433
    Liked
    1 times
    from @PaulOB over at sitepoint

    <script>
    if (!("ontouchstart" in document.documentElement)) {
    $("#test-parent").hover(function() {
    $("#test-child").fadeToggle();
    });
    }
    </script>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com