드롭 다운에서 CSS 스프라이트 롤오버 강조 표시

Question

가로형 드롭 다운 메뉴를 구성했습니다. 각 버튼은 단일 PNG CSS 스프라이트 (background-position: -x -y 사용)를 사용하여 롤오버 할 때 변경됩니다.

내 드롭 다운에 hoverIntent.js과 잘 작동하지만 하위 메뉴에 해당하는 메뉴 항목을 강조 표시하는 방법을 모르겠습니다.

CSS

#navigation-main { 
    background: url(../images/navigation-main.png) repeat-x; 
    height: 54px; 
} 

#navigation-main ul { 
    width: 960px; 
    margin: 0 auto; 
    height: 54px; 
    list-style: none; 

} 

#navigation-main ul li { 

    display: inline; 
    position: relative; 

} 

#navigation-main ul div { 

    display: none; 

} 

#navigation-main ul li div { 

    border-right-style: solid; 

    border-left-style: solid; 

    border-bottom-style: solid; 

    border-color: #2386D8; 

    border-right-width: 1px; 
    border-left-width: 1px; 
    border-bottom-width: 1px; 

    position: absolute; 
    padding: 10px; 
    margin: 0 0 0 1px; 

    width: 300px; 
    top: 54px; 
    background: #113E5F; 

} 

#navigation-main ul li.hovering div { 
    display: block; 
} 


#navigation-main ul li a { 

    display: block; 
    float: left; 
    height: 54px; 
    background: url(../images/navigation-sprite.png); 
    text-indent: -9999px; 
} 


#navigation-main ul li a.nav-home { 
    width: 50px; background-position: 0px 0px; 
} 

#navigation-main ul li a.nav-documents { 
    width: 151px; background-position: -50px 0px; 
} 

#navigation-main ul li a.nav-tools { 
    width: 151px; background-position: -201px 0px; 
} 

#navigation-main ul li a.nav-units { 
    width: 151px; background-position: -352px 0px; 
} 

#navigation-main ul li a.nav-social { 
    width: 151px; background-position: -503px 0px; 
} 

#navigation-main ul li a.nav-people { 
    width: 151px; background-position: -654px 0px; 
} 

#navigation-main ul li a.nav-learning { 
    width: 153px; background-position: -805px 0px; 
} 

#navigation-main ul li a.nav-home:hover { 
    width: 50px; background-position: 0px -54px; 
} 



#navigation-main ul li a.nav-documents:hover { 
    width: 151px; background-position: -50px 54px; 
} 

#navigation-main ul li a.nav-tools:hover { 
    width: 151px; background-position: -201px 54px; 
} 

#navigation-main ul li a.nav-units:hover { 
    width: 151px; background-position: -352px 54px; 
} 

#navigation-main ul li a.nav-social:hover { 
    width: 151px; background-position: -503px 54px; 
} 

#navigation-main ul li a.nav-people:hover { 
    width: 151px; background-position: -654px 54px; 
} 

#navigation-main ul li a.nav-learning:hover { 
    width: 153px; background-position: -805px 54px; 
} 

HTML

<div id="navigation-main" role="navigation"> 

      <ul> 
       <li><a href="#" class="nav-home">Home</a></li> 
       <li><!-- submenu example --> 
       <div><h2>Title</h2> 
       <p>A. Doc 1</p> 
       <p>B. Doc 2</p> 
       <p>C. Doc 3</p> 
       <p>D. Doc 4</p> 
       ... 
       </div> 
       <!-- END submenu --> 
       <a href="#" class="nav-documents ">Documents</a> 
       </li> 
       <li><a href="#" class="nav-tools">Tools</a></li> 
       <li><a href="#" class="nav-units">Units</a></li> 
       <li><a href="#" class="nav-social">Social</a></li> 
       <li><a href="#" class="nav-people">People</a></li> 
       <li><a href="#" class="nav-learning">Learning</a></li> 
      </ul> 
    </div><!-- navigation-main --> 

JS - 보너스로

<script type="text/javascript" charset="utf-8"> 
//<![CDATA[ 
    $(document).ready(function() { 

     function addMega(){ 
     $(this).addClass("hovering"); 
     } 

     function removeMega(){ 
     $(this).removeClass("hovering"); 
     } 

    var megaConfig = { 
     interval: 20, 
     sensitivity: 4, 
     over: addMega, 
     timeout: 30, 
     out: removeMega 
    }; 


    $("#navigation-main ul li").hoverIntent(megaConfig) 


    }); 


    //]]> 
    </script> 

가져가 의도

를 들어,이 메뉴는 IE7에서 제대로 실행해야합니다.

Answer 1

jQuery를 사용하면 active-item과 같은 CSS 클래스를 추가 할 때 .addClass을 사용하여 포인터를 항목 위로 가져 가면됩니다. 같은 방법으로 .removeClass을 사용하여 다른 항목에서 수업을 삭제할 수 있습니다.