/    Sign up×
Community /Pin to ProfileBookmark

Hover on mobile

Hi, I have some hover effects on some photos on my website. 1 of witch is a card flip and one is an image change.
On mobile this works kinda ok. The hover effect turns into a tap effect but normally it would be more intuitive to tab again on the event to revers the effect but I doesn’t work like that. The event reverses only on outside tap or a tap on another element with hover .
Is there anyway I could make this work like I wont ?
Would it work if I replace the hover on mobile with active and that place the hover on desk only ?

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJul 07.2019 — Do you have an example or codepen?
Copy linkTweet thisAlerts:
@codyhillauthorJul 08.2019 — @Sempervivum#1605963 yes, https://relaxed-swirles-9b73a7.netlify.com/design.html
Copy linkTweet thisAlerts:
@SempervivumJul 09.2019 — Amazing that something happens on tap when you coded a hover for desktop.

The browsers translate event for a desktop environment (hover) to a mobile environment. Maybe the resulting effect is what you want and maybe it is not.

To be shure to achieve the effect you want you need to code it explicitly for touch events. This works for me:
<style>
figure.t-shirt .img2 {
display: none;
}

<i> </i> figure.t-shirt.switched .img1 {
<i> </i> display: none;
<i> </i> }

<i> </i> figure.t-shirt.switched .img2 {
<i> </i> display: inline;
<i> </i> }
<i> </i>&lt;/style&gt;
<i> </i>&lt;figure class="t-shirt"&gt;
<i> </i> &lt;img class="img1" src="https://relaxed-swirles-9b73a7.netlify.com/img/t-1-2.png"&gt;
<i> </i> &lt;img class="img2" src="https://relaxed-swirles-9b73a7.netlify.com/img/t-1.jpg"&gt;
<i> </i>&lt;/figure&gt;
<i> </i>&lt;script&gt;
<i> </i> $("figure.t-shirt").on("touchstart click", function (event) {
<i> </i> event.preventDefault();
<i> </i> $(this).toggleClass("switched");
<i> </i> });
<i> </i> $("figure.t-shirt").on("touchend", function (event) {
<i> </i> event.preventDefault();
<i> </i> });
<i> </i>&lt;/script&gt;
Copy linkTweet thisAlerts:
@codyhillauthorJul 09.2019 — @Sempervivum#1606077 Oh, I get it. So I need to do it with javaScript.

so watch the difference between 'touchstart click' and 'touchend' ?
Copy linkTweet thisAlerts:
@SempervivumJul 09.2019 — I added click only for testing purposes, you can omit it. Yes, the script switches to the hidden image and switch back by toggling the class "switched". I do not know about a way to do the same by CSS.
Copy linkTweet thisAlerts:
@codyhillauthorJul 09.2019 — @Sempervivum#1606081 you had touchstart and touchend I guess thats for toggle, right ?
Copy linkTweet thisAlerts:
@SempervivumJul 09.2019 — Often when dealing with touch event you have trouble with the default actions. The listener for touchend is only needed in order to suppress the default action. Before I added it the hidden image was visible only while [b]holding[/b] the touch and disappeard already at releasing. Give it a try yourself.
Copy linkTweet thisAlerts:
@codyhillauthorJul 17.2019 — @Sempervivum#1606083 I manage to make it work using this code.
const card = document.querySelector('.t-card');
const hidden = document.querySelector('.hidden-img');

card.addEventListener('touchstart', ()=&gt; {
hidden.classList.toggle('tap-show');
});

But I have multiple card and multiple hidden-img and once I add querySelecorAll the code stops working.

I tryed to add the event and the class using forRach but that doesn't work either.
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...