Flipcard hover into onclick action

Question

I've created some flip-cards that activate when hovered over. All CSS.

I'm now trying to port something similar over to a mobile version and am pretty stuck on how to approach this.

What I'm looking for is a way to transfer my hover into an onclick style event.

I've uploaded my card here.

www.anorris.co.uk/flip

I was hoping someone could point me in the right direction?

If it's better for me to set my code out in here just let me know and I'll do that instead.

Thanks,

Alistair.

On mobile a tap on the screen moves a *virtual cursor* to the the tap's location. This usually triggers a hover. — Daniel Apt, Nov 03 '14 at 12:28

lee_gladding · Accepted Answer · 2014-11-03T12:34:21.013

1

You could achieve this using :active selector in combination with :hover (as long as the :active selector is called after the :hover selector)

so try:

.stuff1:hover, .stuff1:active {
    -webkit-transition-delay: 0.25s;
    transform: rotateY(180deg);
}

But if you want to use JQuery, what you'd want to do is to change the CSS of your :hover to a class say: .active then add the JQuery to toggle this class on click something like:

$('.x').on('click', function(){
    $(this).toggleClass('active');
});

If you put your code into jsfiddle I'd happily help further, but this should get you started in the right direction.

Fiddle Demo

edited Nov 03 '14 at 12:34

answered Nov 03 '14 at 12:29

lee_gladding

1,090
6
10

Thanks for this. I've tested both and neither is working for me. I think the issue is the fact that the hover over resets when the mouse is removed? I'm testing it on an ipad as we speak and I'm getting nothing. – Alistair Norris Nov 03 '14 at 13:04
1

To use the JQuery version you will need to include the JQuery library before that code and wrap the code in an document ready function. – lee_gladding Nov 03 '14 at 13:32
1

also, for mobile safari i found this which might help with your :active method of fixing this: http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari – lee_gladding Nov 03 '14 at 13:33
Hey @lee_gladding. I've got it working in browser at my anorris.co.uk/flip now from your fiddle (thanks a lot, you've been an amazing help). I understand the logic and everything albeit I'm not a very experienced coder. Sadly this isn't passing over to the ipad. I've used the Jquery method you suggested. Is there something specific I need to do to pass this over to mobile? – Alistair Norris Nov 03 '14 at 14:35
1

I got it:) It was a webkit- prefix for the animations that I was missing that seems to be mandatory. Thanks a lot:) – Alistair Norris Nov 03 '14 at 15:09

score 1 · Answer 2 · answered Nov 03 '14 at 13:07

1

You should try this one: http://davidwalsh.name/css-flip Works very well for me!

For a click event just toggle this css styles to youre div:

transform: rotateY(180deg);

answered Nov 03 '14 at 13:07

Stefan

1,905
7
24
38

Flipcard hover into onclick action

2 Answers2