菜单悬停淡出网站背景

Question

您将在下面的链接中看到，如果您与主菜单系统进行互动，则网站正文会发生转换效果This website

这叫做什么，怎么能在网站上实现？

Answer 1

这是一个简单的 JSFiddle Demo 来说明这个概念。

基本HTML：

<div class="overlay"></div>
<div class="menu">menu menu menu</div>
<h1>headline</h1>
<p>hello there, I am page content</p>

<强> jQuery的：

$(function() {
    $('.menu').on('mouseover', function() {
        $('.overlay').show();  //show overlay when menu hovered
    });
    $('.menu').on('mouseout', function() {
        $('.overlay').hide();   //hide overlay when cursor leaves menu
    });
});

<强> CSS：

.menu {
    width: 100%;
    background: #001fa4;
    color: #fff;
    height: 30px;
    z-index: 200;
    position: relative;
}
.overlay {
    position: absolute;
    display: none;   //overlay element is hidden until jquery shows it
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;   //absolutely position element covers entire page
    background: #939598;
    opacity: .5;
    z-index: 100;
}