[jQuery] 메뉴 항목에 Hover 효과 추가하기

HTML 파일에는 "강아지"라는 리스트로, 순서가 없는 엘리먼트를 작성합니다.
강아지의 종류로 웰시코기, 말라뮤트, 시바 3가지 항목을 추가했습니다.
HTML 코드는 아래 codepen을 확인해주세요.

순서없는 리스트가 메뉴모양을 갖추도록 간단하고 심플하게 스타일을 적용했습니다.
스타일시트에 타입 선택자를 작성해서 세 엘리먼트에 자동 적용되도록 합니다.
아래와 같이 CSS를 작성합니다.

css

div{width:200px; box-sizing:border-box;}
    ul{list-style:none; box-sizing:border-box; margin:0; padding:0;  background:#eeeeee;  }
    ul > li {width:100%; padding:0.8em;  box-sizing:border-box; }
    ul > li > ul {margin-left:8px;  box-sizing:border-box; }
    ul > li > ul > li{background:#eeeeee; width:100%;  border-bottom:1px solid #ffffff; padding:0.5em; }
    ul > li > ul > li::before {content:" - "; }

    .hover{background:#666666; color:#ffffff; cursor:pointer;}

jQuery

$(document).ready(function(){
    //$('classNAME or element').hover(A, B);
    $('ul li ul li').hover(
      function(event){
        $(this).addClass('hover');
      },
      function(){
        $(this).removeClass('hover');
      }
    );
  });

소스 실행보기

See the Pen jQuery menu hover 효과 by daeyun (@daeyun) on CodePen.