Question

我的HTML页面上有一个悬停动画，它是自定义的。现在HTML看起来像这样：

HTML：

<figure class="schedule-info-box">
    <a href="">
        <img src="images/gallery/schedule/1.jpg" alt="schedule image">
        <figcaption>
            <div class="caption-wrapper">
                <h4>Yin Yoga  Dessi</h4>
                <p>06:30 - 07:30</p>
            </div>
            <a href="" class="book-online">
                Cick Here For <br>
                Online Booking
            </a>
        </figcaption>
    </a>
</figure>

你可以看到 FIDDLE HERE （小提琴没有重新创建问题。）

现在当我将鼠标悬停在方框上时，我基本上想要以下效果：

不幸的是，FF（mozilla）中的效果中断了。我得到以下内容：

您可以看到问题是可以在FF中看到图像的顶部。

现在，如果我在mozilla中打开我的开发工具并更改

的状态

<div class="caption-wrapper">
</div>

要:hover，然后在开发工具中添加以下属性height:50%，它就可以正常使用，I.E。图像的那部分不再显示。这很有趣，因为应用于.caption-wrapper的效果如下：

@keyframes expand-schedule-header {
    0% {
        width: 75%;
    }

    25% {
        width: 100%;
    }

    50% {
        left: 0;
        /*top: 0;*/
        width: 100%;
        height: 50%;
    }

    100% {
        height: 50%;
        left: 0;
        width: 100%;
        bottom: 50%;
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
}

所以应用的高度确实是50%，所以为什么这样做呢？我也animation-fill-mode:设置为both;：

.schedule-info-box:hover .caption-wrapper {
    -webkit-animation-name: expand-schedule-header;
    -o-animation-name: expand-schedule-header;
    animation-name: expand-schedule-header;
    -webkit-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    align-items:center;
}

可以看到 HERE （在Chrome中工作正常，而不是FF工作）。

那我为什么要这个问题呢？为什么元素在FF中没有占据50％的高度？为什么我在后台看到图像？

Answer 1

从我看到的内容是因为FireFox呈现的字体与其他浏览器不同，因此元素的高度比预期的要短，但是因为你将它设置为position:absolute，你可以设置{{ 1}}到top:0上的.caption-wrapper

.schedule-info-box:hover

悬停动画无法在firefox中运行，元素不采用关键帧属性

1 个答案: