jQuery: create hover effects that mimic CSS :hover pseudo elements. This is needed for iOS devices which don't seem to acknowledge :hover.

hover-popup.js

/*********************************************
 rollover effects for iOS devices for multiple 
 elements on a page.
 see this in action here: www.sharenpay.com
*********************************************/

$(document).ready(function() {
    $('.spider-popup').hide(); // hide all the popups at first

    $('.spider-circle').mouseover(function() { 
        $(this).find('.spider-popup').show(); // when user hovers over circle, show popup
    });
    
    $('.spider-circle').mouseout(function() {
        $('.spider-popup').hide(); // when user leaves, hide popup again
    });
});

popup.html

<div class="spider-circle">
  <div class="spider-popup">
    <p class="spider-popup-content">Easily pay for services you use: salon, dentist, etc.</p>
  </div> <!-- .spider-popup -->
</div> <!-- .spider-circle -->