Question

我页面底部的菜单栏由徽标的悬停效果触发，鼠标输出也有1秒的延迟。当我输入1秒的页面时，我想看菜单。因此，用户可以看到如何打开菜单。

干杯碧玉

Answer 1

您可以使用JavaScript在hover上添加和删除类，而不是通过在您的css中使用:hover来实现它（我将假设您正在这样做......）：

$(document).ready(function(){
    // event hover add / remove open class
    $("#menu").on("mouseenter", function(e){
        $(e.currentTaget).addClass('open');
    }).on("mouseleave", function(){
        $(e.currentTaget).removeClass('open');
    });
    // hide menu 5s after page load
    setTimeout(function(){
        $(e.currentTaget).removeClass('open');
    }, 5000);
});

当页面加载时，您的菜单默认会打开class。

<div id="#menu" class="open">
    <!-- menu items... -->
</div>

然后在你的css中使用：

#menu {
    /* menu close style */
}

#menu .open {
    /* menu open style */
}

希望有所帮助：）

进入页面时显示悬停效果

1 个答案: