CODEWITHSUNDEEP
javascriptjquerycssmobilemobile-safari
tobias_burkill
tobias_burkill

Reputation: 35

Prevent hyperlink on touch and show hover state

I'm not sure why but when I touch a link on on a site I'm building on an iPhone/tablet it doesn't trigger the hover over state and instead just jumps straight through to the link. You can see the test site here http://lovelldesign.co.uk/home

The links are just big images and the hover over state reveals the name of the project, that's why it's essential that the hover over state is triggered by the first touch and then the user would need to touch again to go through to the project.

I've searched for touchstart examples on here and tried to work from them to solve my own problem but to no avail.

Here is the HTML

<div class="projectContainer">
    <a href="<perch:content id="url" label="URL" required="true" />" class="projectOverlay">
        <h1><perch:content id="title" type="text" label="Heading" required="true" /></h1>
    </a> 
    <img src="<perch:content id="image" type="image" label="image" />" />

Here is the CSS:

.projectContainer {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 7px;
    height: 100%;
    display: block; }

.projectContainer:hover .projectOverlay {
    opacity: 0.9;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }

.projectContainer .projectOverlay {
    opacity: 0;
    background-color: #00152e;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 96%;
    height: 100%;
    padding: 2%;
    color: white;
    text-decoration: none; }

Any help would be greatly appreciated.

Many thanks

Upvotes: 2

Views: 2658

Answers (1)

Giona
Giona

Reputation: 21114

I had the same "issue" (actually it's the correct behaviour) sometimes. To fix it, you need a little of javascript.

First of all, let's detect touch events. You can do it with Modernizr, this is the minimum bundle to achieve it: http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes

1) include the generated script in your <head> section: Modernizr is going to add a "touch" class to your page's <html> element if touch events are supported, a "no-touch" class if they're not.

2) if "touch" events are enabled, we need to add a javascript listener to simulate the hover state at first click:

if(Modernizr.touch){

    var hoverClass = 'projectContainer-hover', // the "simulated hover" class
        $projectContainers = $('.projectContainer');

    $projectContainers.on('click',function(event){
        var $this = $(this);
        if(!$this.hasClass(hoverClass)){
            event.preventDefault();
            $projectContainers.removeClass(hoverClass);
            $this.addClass(hoverClass);
            return false;
        }
    }).on('focusout',function(){
        // remove the class if the user focuses on another element
        $(this).removeClass(hoverClass);  
    });
}

I'm supposing you're using jQuery. If you're not, and you need to support older IEs, you should know that selecting elements by their class is not easy.

3) At last, change your css selector this way:

.projectContainer:hover .projectOverlay, .projectContainer-hover .projectOverlay {
    // ...etc...    
}

NOTE: this method isn't perfect at all, because touch events are enabled in many laptops too nowadays. Any device with touch events enabled will need a double click if you implement it. It's up to you to decide if it's worth it!

Atm i think the only alternative is user-agent spoofing, which you really want to avoid.

Upvotes: 2

Related Questions