jquery 작성 관련입니다.

html 작성시에,
그냥 a태그로만 안하고 ul과 li를 사용하는 이유가,
글자에만 영역을 잡으려고 한다고 하셨습니다.

그렇게 하지 않으면 보더를 그렸을때 아래사진처럼,

글자 옆으로 영역이 더 발생하기에 그렇게 한다고 하셨고,
아, 그런의도구나라고 이해했습니다.

그렇다면, jquery 식을 보면,

이렇게 되면,
".btn li"를 눌렀을 때가 되고, 결국 li의 영역은
위의 사진처럼 영역이 똑같아 지게 됩니다.

따라서,

'.navi li a' 여기에 mouseenter와 mouseleave가 있어야 합니다.
그러나 이렇게 되면 changeImage의  data-image경로가 꼬여버리기 때문에
data-image를 li가 아닌 a에 주던가,

혹은 아래처럼,

parent()를 넣어줘서 해야,
영역이 아래 그림처럼 잡히고 그안에서만 반응하도록
선생님께서 의도한 기능이 구현되는 것 같습니다.

제가 말씀드리는 부분이 이해가 가시나 모르겠습니다.

주제넘게 이런거 올려서 죄송합니다.
보다 정확하게 하고 싶은 마음과, 선생님께 제가 이렇게 생각한걸 보고 피드백도 받고 싶은 마음,
그리고 제가 짚어낸 부분이 맞다면, 다른분들도 같이 참고 했으면 하는 마음이 있어서 그랬습니다.

피드백 기다리겠습니다.