jQuery 切换幻灯片在 Safari 中不起作用答案

【问题标题】：jQuery Toggle Slide not working in SafarijQuery 切换幻灯片在 Safari 中不起作用
【发布时间】：2016-11-11 02:05:02
【问题描述】：

我有一个带有一些悬停效果的砌体网格。悬停效果在 Chrome 中工作正常，但在 Safari 中不起作用。在此处查看代码：

http://codepen.io/ameliarae/pen/MbKjWv

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

紫色叠加层没有滑出，没有覆盖其容器的整个宽度，并且似乎在水平和垂直方向上都被裁剪了。在 Chrome 中它可以正常工作（滑出并且紫色覆盖是容器的全宽和高度）。

下面是相关代码：

HTML：

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

SCSS：

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

jQuery:

$(document).ready(function(){
$(".portfolio-item").hover(function(){
     $(this).find(".overlay").toggle("slide", { direction: "right" }, 1000);
     });
});

完整代码在这里：http://codepen.io/ameliarae/pen/MbKjWv

【问题讨论】：

您好，不知道这是否对您有帮助，但是，当您调整窗口大小使其显示为 2 列时，它在 safary 上运行良好，这可以为您提供线索

标签： javascript jquery html css slide

【解决方案1】：

我刚刚想通了。我必须将 overflow:hidden 替换为 overflow:visible; 到 .portfolio-item 类，以使其在 Chrome 和 Safari 中工作。

所以现在看起来像这样：

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

【讨论】：