Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Hover on touch screens

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #278424
    psytanium
    Participant

    Hello,

    I created a hover effect for the products boxes as you can see here https://www.woodandgas.com/centrals-c-35_42_53.html

    On tablets and phones, when clicked it take the user to the product page, how can i make it double touch ? First tap for the hover effect, second tap for the url.

    :)

    #278425
    Beverleyh
    Participant

    I’m on an iPhone currently but if I tap-and-hold I can see a zoom effect on the images. Is that all the hover does? An image zoom? As long as you’re not relying on :hover to do/reveal anything critical (product info, specs, instructions), I wouldn’t bother trying to change the default viewing browser behaviour. Screwing with a user’s learned behaviour of how their device works on the web (from all those other websites they visit), and going against their expectations, can do more harm than good, erodeing their confidence in the website and even you as a service provider. I would alter the design/coding so that it doesn’t rely on :hover for anything important. But a visual effect is more of a vanity thing so I would advise you that if that’s all it is, to let it be.

    #278426
    psytanium
    Participant

    Hi Beverleyh,

    No not only image zoom, this is the effect, opacity layer woth more product info on it -> https://imgur.com/a/BF1tRer

    I know you can tap-and-hold, but I’m trying to make ot double tap, first tap to activate hover effect, and a second tap tp open URL.

    Thanks

    #278430
    Beverleyh
    Participant

    Can you mock-up a basic demo in CodePen?

    I understand what you’re trying to do but I’m not sure that it will work the way you want at this stage, even if you were to separate the “taps”. What I mean is that I would expect to see the full hover effect you describe, on iPhone, via a tap-and-hold gesture, and unfortunately I don’t, so I’m not convinced that there is the full hover effect to separate from the hyperlink activation, the way it’s currently coded. But I can’t be sure because I can’t see your code in order to run isolated tests. A basic demo in CodePen would help with that.

    A reduced demo would attract more responses (the prospect of poking about in a full codebase via dev tools puts folks off) and more easily highlights to us the HTML markup, CSS and/or JS being used. I can’t tell (from iPhone) for example, if you’ve created the hover effect with CSS or JS, but saying so won’t really help much here – the pertinent code, shown upfront, will. Help us to help you.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.