2

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.

4

1 回答 1

2

jsFiddle 演示

要解决评论中的问题，您所要做的就是更改此 CSS：

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

这就是我所说的事件委托的意思......

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

jQuery .on() 事件委托文档

因为我已经将.on()事件与.flip-container类绑定到元素，所以它现在可以对当前（或将来）作为 NodeList 实体的任何元素激活！例如， , 在翻转.flip-trigger之前与卡片绑定。现在，要让它重新翻转（或其他任何东西），您可以执行以下操作：

$(".flip-container").on('hover','.flipped',function () {
    alert('This is a flipped over card!');
});
于 2013-08-28T00:37:37.913 回答