CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
Nathan Friend
Nathan Friend

Reputation: 12814

No mouse events on element's backface

I'm writing a web app that includes a "card flip" animation similar to the first example on this page (although I trigger the animation with a click, rather than a hover). The flip is working, but when the animation is complete and the backface is visible, no mouse events register on the element - click, hover, or even text select. Any ideas why mouse events are not registering?

Here's a fiddle: http://jsfiddle.net/NathanFriend/3gUPA/

I'm using Chrome 29. My app only has to work in this browser.

Upvotes: 2

Views: 865

Answers (1)

DevlshOne
DevlshOne

Reputation: 8457

jsFiddle DEMO

All you have to do to fix the problems in your comment is change this CSS:

.flipped {
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: visible;
}

Here's what I mean by event delegation...

$(".flip-container").on('click','.flip-trigger',function () {
    $(".flip-card").toggleClass("flipped");
});

jQuery .on() event delegation documentation

Because I've told the .on() event to be bound to elements with the .flip-container class, it can now be active for any elements presently (or in the future) that are an entity of the NodeList! For instance, .flip-trigger, which is tied to the card before it's flipped. Now, to get it to flip back over (or whatever else), you can do something like this:

$(".flip-container").on('hover','.flipped',function () {
    alert('This is a flipped over card!');
});

Upvotes: 2

Related Questions