- This topic is empty.
November 2, 2018 at 11:19 pm #278424psytaniumParticipant
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.
:)November 3, 2018 at 2:56 am #278425BeverleyhParticipant
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
:hoverto 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
:hoverfor 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.November 3, 2018 at 3:14 am #278426psytaniumParticipant
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.
ThanksNovember 3, 2018 at 8:37 am #278430BeverleyhParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.