javascript - 过渡时背景无溢出

Question

我得到以下 http://jsfiddle.net/9dy38529/7/代码。

一切都归结在这个 HTML 中:

<div class="view view-third">
 <div class="pre-mask"><h1>Lorem</h1></div>
 <img src="http://goo.gl/Dr6upR" />
 <div class="mask">
  <h2>Lorem</h2>
  <p>Lorem ipsum solar mit</p>
  <a href="#" class="info">Lorem</a>
 </div>
</div>

问题:悬停后它显示背景颜色而不使用 overflow-hidden 然后在转换后它再次正确。

我相信我遵守了所有规则，但这让我感到困惑。我已经尝试了很多其他的 SO 建议，例如通过从 .pre-mask 创建一个 div 作为父级来添加额外的 position:relative; 但这没有用。此外，我在代码中的几乎每个类上都有 overflow-hidden。这也没有用。然后我试图用一个过渡来隐藏它，但这把现有的传统搞砸了。所以我有点迷路了。

Answer 1

这似乎是一个 z-index 问题。将 z-index 应用于 .view，例如:JS Fiddle

.view {
    width: 300px;
    height: 200px;
    margin: 0px;
    display: inline-block;
    border: 4px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    /*-webkit-box-shadow: 1px 1px 2px #e6e6e6;-moz-box-shadow: 1px 1px 2px #e6e6e6;box-shadow: 1px 1px 2px #e6e6e6;*/
    cursor: default;
    background: #fff;
    border-radius: 50%; 
    z-index:99999;
}