元素背面没有鼠标事件

Question

我正在编写一个包含“卡片翻转”动画的网络应用程序，类似于this页面上的第一个示例（尽管我通过点击触发动画，而不是悬停）。翻转工作正常，但是当动画完成且backface可见时，元素上没有鼠标事件注册 - 单击，悬停甚至文本选择。有关鼠标事件未注册的任何想法吗？

这是一个小提琴：http://jsfiddle.net/NathanFriend/3gUPA/

我正在使用Chrome 29.我的应用只需在此浏览器中使用。

Answer 1

jsFiddle DEMO

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

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

这就是我所说的事件授权......

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

jQuery .on() event delegation documentation

因为我告诉.on()事件绑定到具有.flip-container类的元素，所以它现在可以对当前（或将来）作为该实体的任何元素都是活动的节点列表！例如，.flip-trigger，在翻转之前与卡绑定。现在，为了让它翻转（或其他任何东西），你可以做这样的事情：

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