0

So I have a hover effect on a link.

I know that if you click something on mobile, it activates the :hover attribute.

But, it will also follow the link.

I want to know if there is some way I can have the hover effect appear on mobile and pc alike without having to click and follow the link.

NoNaMe
  • 6,020
  • 30
  • 82
  • 110
Austin Griner
  • 177
  • 1
  • 1
  • 7

2 Answers2

0

I guess you can use touchstart event

Please see How do I simulate a hover with a touch in touch enabled browsers?

Community
  • 1
  • 1
user1608841
  • 2,455
  • 1
  • 27
  • 40
0

You could refer the code snippet over here http://codepen.io/mickeykay/pen/wiLno

HTML
<h3>Test me in mobile!</h3>
<p>Tap the image to see the :hover effect. Tap anywhere else inside this iframe to un-hover.</p>
<span class="container">
  <img src="http://www.mightyminnow.com/wp-content/uploads/2013/06/tech_tip_icon.jpg" />
  <span class="details">Details go here</span>
</span>
CSS
.container {
  position: relative;
}

.container .details {
  display: inline-block;
  position: absolute;
    top: 100%;
    padding: 10px 15px;
    z-index: 1; 
    display: none;
    width: 200px;
    background: #222;
    color: #FFF;
}

.container:hover .details,
.container .details:hover {
    display: block; 
}


/* jQuery enabled behavior for mobile */
.touch .container.no-hover .details {
    display: none !important;   
}
Jquery
// Add no-touch class to body for mobile touch events and toggle hover class on elements that need it
    if ("ontouchstart" in document.documentElement) {
        document.documentElement.className += " touch";
    }

    // Add and remove no-hover class to <li>'s for mobile hover events
    jQuery('.touch .container').each(function() {
        var div = jQuery(this);

        div.hover(function() {
            div.removeClass('no-hover');
        });

        jQuery('*').not(div).bind('click', function() {
            div.addClass('no-hover');
        });

    });
Megha Nagpal
  • 170
  • 4