페이드 웹 사이트 배경 호버

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