Question

我有一个带有一些悬停效果的砖石网格。悬停效果在Chrome中运行良好，但它们在Safari中不起作用。请参阅此处的代码：

当您将鼠标悬停在Safari中的图像上时，会发生以下情况：

紫色覆盖层不会滑出，不会覆盖其容器的整个宽度，并且似乎水平和垂直裁剪。在Chrome中，它正常工作（滑出＆紫色覆盖层是容器的整个宽度和高度）。

以下是相关代码：

HTML：

SELECT is_local_cursor_default FROM sys.databases WHERE name = DB_NAME();

SCSS：

<article>
  <section class="portfolio-item">
    <div class="overlay">
    <div class="text-bloq">
    <p>How Truthful are Food Labels? Interactive Quiz</p><br>
    <span class="type">Design &amp; Dev</span>
    </div>
    </div>
    </section>
</article>

jQuery的：

 article {
     -moz-column-width: 16em;
     -webkit-column-width: 16em;
     -moz-column-gap: 1em;
     -webkit-column-gap: 1em; 
     section {
         display: inline-block;
         margin:  0.25rem;
         padding:  1rem;
         width:  100%; 
         background:  $purple;

     }

 }
 .overlay{
    position:absolute;
    width: 100%;
    display: block;
    top:0;
    left: 0;
    text-align: left;
    font-size: 1.55em;
    font-family: $light;
    color: $white;
    opacity: 0.8;
    height: 100%;
    background: $purple;
    .text-bloq{
        display: block;
        position: absolute;
        margin: 50% auto;
        left: 0;
        right: 0;
        padding:1em;
        .description{
            font-family: $light;
            font-size: 0.75em;
        }
        .type{
            font-family: $light;
            font-size: 0.75em;
            padding: 0.5em 0.65em;
            border: 2px solid $white;
            margin-top: 1em;
        }
    }
}
.portfolio-item{
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:100%;
    &:hover{
        cursor: pointer;
    }
}
.portfolio-item:nth-child(1){
    background-image:url('http://placehold.it/600x600');
    min-height: 600px;
    &:hover{
       @include animation('animatedBackgroundWork 10s linear infinite');
   }
}

此处的完整代码：http://codepen.io/ameliarae/pen/MbKjWv

Answer 1

我只是想通了。我不得不将溢出：隐藏替换为溢出：可见; 到.portfolio-item类，以使其在Chrome＆amp; Safari浏览器。

现在看起来像这样：

.portfolio-item{
     position:relative;
     overflow:visible;
     background-size:cover;
     background-position:100%;
&:hover{
    cursor: pointer;
}
}

jQuery Toggle Slide在Safari中不起作用

1 个答案: