Question

我目前在我的标题页上有一个背景视频，上面有两个部分，每个部分覆盖半页。两个部门都有一条消息，在加载页面后6秒出现，还有一个：悬停效果，在整个分区上添加一个深色透明背景。

现在我的问题：我想知道是否可以这样做：在加载页面6秒后，当消息出现时，悬停生效。目前：在消息出现之前将鼠标悬停在屏幕的一半，因此在前6秒看起来有点愚蠢。

我的代码的简化版本：

HTML：

function use_mobile_theme() {
    // Chech device is mobile or not
    if(wp_is_mobile()){
        return 'theme19388'; // set theme name here, which you want to open on mobile
    }
    else {
        return 'milano'; // set theme name here, which you want to open on other devices, like desktop
    }
}

add_filter( 'stylesheet', 'use_mobile_theme' );
add_filter( 'template', 'use_mobile_theme' );

和CSS：

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

延迟之前：悬停变为活动状态

1 个答案: