마우스 호버했을 때 일어나는 현상

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

마우스 올리면 배경이미지 변경하기 with jQuery

작성

411

선생님 안녕하세요.

마우스를 호버했을 때 일어나는 현상에 대해서 궁금한 점이 있어서 질문 드립니다.

본 예제에서 ABOUT, CLASS, LOCATION 단어의 오른쪽 빈 공간에 마우스를 올릴 경우에도 배경이 변하는 현상이 일어납니다.

예를 들면 제가 아래에 <--->로 표시해둔 것처럼 <---->만큼의 빈 공간에 마우스를 올릴 경우에도 배경이 변경되는 현상이 일어나는데 이런 현상은 어떻게 해야 막을 수 있을까요?

ABOUT<---->
INSTRUCTOR
CLASS<----->
LOCATION<->

예전 예제 중 비슷한 경우에는 visibility: hidden을 통해서 했었지만, 이번 경우에는 그렇게 하면 단어 자체가 사라집니다.

확인해 주시면 감사드리겠습니다!!

답변 1

지식공유자

.navi li:hover a {...}

.navi li:hover a:before {...}

위에처럼 li에 호버를 하면 li는 너비가 100%라서 그렇게 됩니다.

영상에 코드를 자세히 보시면 아래처럼 a에 호버를 했습니다.
그래야 a가 가지고 있는 텍스트 만큼만 호버 영역이 됩니다.

.navi li a:hover {...}

.navi li a:hover:before {...}

질문자

선생님 댓글 감사합니다.

다만, li 태그가 아닌a 태그에 hover를 했음에도 불구하고 똑같은 현상이 발생합니다.

이는 제가 작성한 코드가 아닌 선생님께서 제공해주신 코드로 실행했을 때도 같은 문제가 발생하는데,
만약 선생님께서는 그런 문제가 없는데 저한테만 이런 문제가 발생하는 거라면 브라우저 호환성의 문제일까요?

현재 저는 크롬을 사용하고 있습니다.

지식공유자

코드를 복사해서 올려주세요. 그래야 원인을 찾을 수 있을 것 같습니다.

질문자

선생님 제 github 주소 올리겠습니다!

https://github.com/Kyu-holic/mouse-hover-background-change-jQuery.git

감사합니다!

지식공유자

소스코드 받아서 해봤는데 잘 되는데요.

a에 호버해놓으신거 텍스트 양에 맞게 호버되는거 정상입니다.

질문자

그러면 제 컴퓨터에서의 문제인가보네요!

확인해 주셔서 정말 감사드립니다 :)

인프런 커뮤니티 질문&답변