CSS转换和悬停在转换元素内的按钮

Question

我只是不明白发生了什么。我的HTML：

<div class='quote_post'>
    <div class='quote_hover'>
        <div class='action_button'>
            <a href='<?php the_permalink() ;?>'><span>Read More</span></a>
        </div>
    </div>
</div>

我的CSS：

.quote_post{
    background:#f2f2f2;
    position:absolute;
    z-index:999;
    top:0;bottom:0;left:0;right:0;
}
.quote_hover{
    position:absolute;
    top:0;bottom:0;left:0;right:0;
    opacity:0;
    z-index:10010;
    background:#f2f2f2;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

    -webkit-transform: translate(0,280px);
    -moz-transform: translate(0,280px);
    -o-transform: translate(0,280px);
    -ms-transform: translate(0,280px);
     transform: translate(0,280px);
}
.quote_post:hover .quote_hover{
    -webkit-transform: translate(0,220px);
    -moz-transform: translate(0,220px);
    -o-transform: translate(0,220px);
    -ms-transform: translate(0,220px);
     transform: translate(0,220px);
    opacity:1;
}

这里的问题是什么？悬停工作。元素从底部移动，里面有按钮......但是......

<a href='<?php the_permalink() ;?>'><span>Read More</span></a>

.action_button{
    text-align:center;
    position:relative;  
}
.action_button a{
    position:relative;z-index:13000;
    display:inline-block;
    padding:8px 12px 8px 12px;
    border:1px solid #bcbcbc;
}

此标记通常不会做出反应......我必须尝试几次鼠标移动才能使此链接正常工作。

我没看到什么？我也尝试使用jQuery with（'mouseenter'） - 以及相同的行为

答案 - 在FireFox和Safari上运行良好。在Chrome上无法正常工作。