html - 在 :hover becomes active 之前延迟

Question

我目前在标题页上有一个背景视频，上面有 2 个部分，每个部分占半页。两个部门都有一条消息，在加载页面后 6 秒出现，还有一个 :hover 效果，在整个部门上添加一个黑色透明背景。

现在回答我的问题:我想知道是否有可能使 :hover 在加载页面后 6 秒生效，因为消息出现。目前 :hover 会在消息出现之前使一半屏幕变暗，因此前 6 秒看起来有点愚蠢。

我的代码的简化版本:

HTML:

<div class="ex1">
    <div class="ex2">
        <h1> Hello World! </h1>
    </div>
    <div class="ex3">
        <h1> PFUDOR </h1>
    </div>
</div>

和 CSS:

h1 {
    font-size: 48px;
    opacity: 0;
    animation: fadein 2s forwards;
    animation-delay: 6s;
}

.ex1 {
    height: 300px;
    width: 1200px;
    background-image: url('http://i.ytimg.com/vi/qRC4Vk6kisY/maxresdefault.jpg');
}

.ex2 {
    width: 50%;
    height: 100%;
    display: inline-block;
    float: left;
    text-align: center;
}

.ex3 {
    width: 50%;
    height: 100%;
    display: inline-block;
    float: right;
    text-align: center;
}

.ex2:hover {
    background-color: rgba(0, 0, 0, 0.35);
}

.ex3:hover {
    background-color: rgba(0, 0, 0, 0.35);
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

Answer 1

您可以使用 :after 伪选择器制作叠加层，并以相同的延迟对其进行动画处理。 Ex1 确实需要像 position: relative 这样的东西来确保绝对定位的元素理解父元素的大小。

h1 {
    font-size: 48px;
    opacity: 0;
    animation: fadein 2s forwards;
    animation-delay: 6s;
}

.ex1 {
    position: relative;
    height: 300px;
    width: 1200px;
    background-image: url('http://i.ytimg.com/vi/qRC4Vk6kisY/maxresdefault.jpg');
}

.ex2 {
    width: 50%;
    height: 100%;
    display: inline-block;
    float: left;
    text-align: center;
}

.ex3 {
    width: 50%;
    height: 100%;
    display: inline-block;
    float: right;
    text-align: center;
}

.ex2:hover {
    background-color: rgba(0, 0, 0, 0.35);
}

.ex3:hover {
    background-color: rgba(0, 0, 0, 0.35);
}

.ex1:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: remove 0s forwards;
    animation-delay: 6s;
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes remove {
    from { width: 100%; height: 100%; }
    to { width: 0; height: 0; }
}

<div class="ex1">
    <div class="ex2">
        <h1> Hello World! </h1>
    </div>
    <div class="ex3">
        <h1> PFUDOR </h1>
    </div>
</div>