小编Pat*_*git的帖子

我有一个仅限CSS的翻转卡片动画,当用户将鼠标悬停在容器上时,会显示卡片的另一面:https://jsfiddle.net/qb7unks5/3/.

卡的两侧应该是可点击的链接.理想情况下,整个容器都是可点击的链接,但我的代码在Firefox中不起作用.因为JSFiddle中的链接永远不能在Firefox中工作,所以你实际上无法通过使用JSFiddle看到这一点,但是如果你要保存代码并独立运行它,你会发现,通常情况下,链接无法在Firefox下激活情况:

(1)当您快速将鼠标移动到容器中并单击红色卡片的文本时.文本变黑,表示a:active已触发效果,但实际上未激活链接.

(2)当卡片翻转动画处于活动状态时,单击灰色边框容器的白色(非红色,非蓝色)区域时,链接有时无法激活.

这两个问题似乎只发生在Firefox中,而不是Chrome.而且,由于Firefox中的JSFiddle如何处理链接,你无法通过使用JSFiddle链接来说明.

问题是,显然,如果你点击一个与Firefox中的旋转图形有某种关联的链接,并且该图形几乎立即 "旋转" ,a:active则会触发链接状态,但链接不会被激活!

所以,我假设我必须创建一个<a style='display:block'>容器大小和形状相同的块,使其z-index高于数字,并且通过这样做,基本上使整个区域容器可通过与图不直接相关的链接进行点击.有没有更好的解决方案？

figure {
    margin: 0;
}

.container {
    width: 200px;
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 800px;
       -moz-perspective: 800px;
         -o-perspective: 800px;
    	    perspective: 800px;
    }

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
         -o-transition: -o-transform 1s;
            transition: transform 1s;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: …

比较两个timespec值以查看哪个首先发生的最佳方法是什么？

以下内容有问题吗？

bool BThenA(timespec a, timespec b) {
    //Returns true if b happened first -- b will be "lower".
    if (a.tv_sec == b.tv_sec)
        return a.tv_nsec > b.tv_nsec;
    else
        return a.tv_sec > b.tv_sec;
}