[jQuery] 메뉴 요약 정보 표시하기

메뉴에 마우스 오버시, 간략한 정보를 표시하는 툴팁tooltip같은 것을 적용해보도록 하겠습니다. ,h3>jQuery

$(document).ready(function(){

        // hide span element
        $('.w').hide();
        $('.m').hide();
        $('.s').hide();

        // show class name 'w'
        $('#w').hover(function(event){
          $('.w').show();
          $('.m').hide();
          $('.s').hide();

          $('#w').addClass('hover');
        },
        function(){
          $('#w').removeClass('hover');
        });

        //show class name'm'
        $('#m').hover(function(event){
          $('.w').hide();
          $('.m').show();
          $('.s').hide();

          $('#m').addClass('hover');
        },
        function(){
          $('#m').removeClass('hover');
        });

        //show class name's'
        $('#s').hover(function(event){
          $('.w').hide();
          $('.m').hide();
          $('.s').show();

          $('#s').addClass('hover');
        },
        function(){
          $('#s').removeClass('hover');
        });



      }); //END document.ready

소스 실행보기

See the Pen 메뉴의 요약 정보 표시 jQuery menu hover tooltip by daeyun (@daeyun) on CodePen.