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;
}

过渡时没有溢出背景

1 个答案: