0

I’m having trouble with a hover technique I’m trying to implement on a site. Basically, I have div (.portfolio-item) which is used to display a background-image. The .portfolio-item contains one direct child — <div class="portfolio-item-info"> which is absolutely positioned and is only shown when the user hovers over the parent element.

This works fine on laptops and Android devices but for iOS devices it doesn’t work at all. So if the user touches the .portfolio-item div, nothing happens.

HTML

<div class="portfolio-item" style="background-image: url('path/to/url')">
    <div class="portfolio-item-info">
        <h3 class="font-secondary-bold">Some Title</h3>
        <ul class="list-unstyled list-inline">
            <li>Publication</li>
            <li>Print</li>
        </ul>
        <a href="#">Take a look</a>
    </div>
</div>

CSS

.portfolio-item {
    background-color: #fff;
    background-size: cover;
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
    min-height: $portfolioItemHeight;

    &:before {
        content: "";
        background-color: $colorLight;
        background-color: rgba(255, 255, 255, 0.8);
        min-height: $portfolioItemHeight;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        transition: opacity 0.5s ease-in-out;
    }

    &:hover,
    &:focus {

        &:before {
            opacity: 1;
        }

        .portfolio-item-info {
            top: 0;
        }
    }
}

To make it work I’m using something really hacky, I’m putting an onclick attribute on the .portfolio-item div e.g.

<div class="portfolio-item" onclick="void(0)" style="background-image: url('path/to/url')">

This hacky solution does work but I’d ideally like something less… hacky.

aaronk6
  • 2,701
  • 1
  • 19
  • 28
IeriOggiDomani
  • 133
  • 12
  • Sounds like you're trying to replicate hover on touch devices - http://stackoverflow.com/questions/8970280/how-to-simulate-hover-effect-on-touch-devices – hungerstar Jan 30 '15 at 17:13

1 Answers1

1

No standard defines how touch devices should deal with hover and it's up to the browser vendor, so any solution will be a kind of 'hack'. However, the following one is more reliable:

Using jQuery you can turn the class hover on / off on touch start / end

$(document).ready(function() {
    $('.portfolio-item').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover');
    });
});

In CSS you add the .hover class with the same parameters as existing :hover.

Alexander Dayan
  • 2,846
  • 1
  • 17
  • 30
  • Hi Alexander, unfortunately I’ve found that this only works in iOS 8 :-( In iOS 7.1 the hover class is only added when you touch it — meaning that you have to press down and hold on `.portfolio-item` for `.portfolio-item-info` to appear. On iOS 8, I tap once and `.portfolio-item-info` appears, then stays until I tap again. What is the difference between the JS for iOS 7.1 and iOS 8. – IeriOggiDomani Feb 06 '15 at 17:58
  • P.S. just to avoid confusion, I always test on Mobile Safari in iOS. – IeriOggiDomani Feb 06 '15 at 17:59
  • 1
    Yes, iOS 7 requires 'touch ans hold'. In iOS 8 it was improved :) – Alexander Dayan Feb 06 '15 at 18:03
  • It seems that the `onclick="void(0)"` approach is what is recommended on Apple’s Safari Web Content Guide https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6 – IeriOggiDomani Feb 06 '15 at 22:30