jQuery를 사용하여 메뉴에 호버 효과를 추가하는 방법

Question

this 페이지에 최상위 메뉴가 있으며 목록 (ID가 "top-nav"인 UL)으로 구현되었습니다.

필자는이 문제를 해결하기 위해 노력 중이며 사용자가 마우스를 가져갈 때 jQuery를 사용하여 페이드 인/페이드 아웃 효과를 추가하는 방법을 알아 냈습니다. 따라서 배경 이미지가 즉시 변경되는 대신 천천히 페이드 인됩니다.

다음은 HTML입니다 :

<ul id="top-nav" class="flatList"> 
    <li> 
     <a href="#"> 
     <span class="embed embed-top-nav">Home</span> 
     <p>site home, news, highlights</p> 
     </a> 
    </li> 
    <li><a href="#" class="embed embed-top-nav" >Watch UNC-TV</a></li> 
    <li><a href="#" class="embed embed-top-nav">Learn</a></li> 
    <li><a href="#" class="embed embed-top-nav">Support Us</a></li> 
    <li><a href="#" class="embed embed-top-nav" id="nav-last">Contact</a></li> 
</ul> 

그리고 여기에 지금 목록 및 앵커 태그 '호버를 처리하는 CSS의 :

ul#top-nav { 
    top:71px; 
    margin-left:196px; 
    position:absolute; 
    width:659px; 
    min-width:650px; 
} 
ul#top-nav li, ul#top-nav li a{ 
    width:131px; 
    height:50px; 
    float:left; 
    border: 0px solid white; 
} 
ul#top-nav li a:link, ul#top-nav li a:visited { 
    text-decoration:none; 
    color: #2C6286; 
    background: transparent url(../img/nav-button.png) no-repeat 0 11px; 
    border: 0px solid green; 
    padding-top:9px; 
    padding-left:14px; 
    padding-top:9px; 
    z-index:100000; 
} 
ul#top-nav li a:hover { 
    background: transparent url(../img/nav-button.png) no-repeat 0 -45px; 
} 
ul#top-nav li .embed-top-nav { 
    font-size:25px  
} 
ul#top-nav li p { 
    position:absolute; 
    top:37px; 
    width:109px; 
    font-size:8px;  
    color:#666; 
    cursor:pointer; 
} 
a:link#nav-last, a:visited#nav-last { 
    background: transparent !important; 
} 
a:hover#nav-last { 
    background: transparent url(../img/nav-button.png) no-repeat 0 -45px !important; 
} 

감사합니다.

Answer 1

시도 : top-nav가 공중 선회하고 element_id는 당신이/페이드 아웃 할 요소의 id입니다 요소의 ID입니다

$('#top-nav').hover(function(){ 
    $('#element_id').fadeIn('slow'); 
}, function(){ 
    $('#element_id').fadeOut('slow'); 
}); 

.

기본적으로 hover 메서드는 두 가지 기능이 필요합니다. 첫 번째는 마우스가 요소를 입력 할 때 실행되고 두 번째 요소는 마우스를 놓을 때 실행됩니다.

추가 정보 :

• http://api.jquery.com/hover/