-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
마우스 호버했을 때 일어나는 현상
22.05.23 22:22 작성 조회수 272
2
선생님 안녕하세요.
마우스를 호버했을 때 일어나는 현상에 대해서 궁금한 점이 있어서 질문 드립니다.
본 예제에서 ABOUT, CLASS, LOCATION 단어의 오른쪽 빈 공간에 마우스를 올릴 경우에도 배경이 변하는 현상이 일어납니다.
예를 들면 제가 아래에 <--->로 표시해둔 것처럼 <---->만큼의 빈 공간에 마우스를 올릴 경우에도 배경이 변경되는 현상이 일어나는데 이런 현상은 어떻게 해야 막을 수 있을까요?
ABOUT<---->
INSTRUCTOR
CLASS<----->
LOCATION<->
예전 예제 중 비슷한 경우에는 visibility: hidden을 통해서 했었지만, 이번 경우에는 그렇게 하면 단어 자체가 사라집니다.
확인해 주시면 감사드리겠습니다!!
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2022.05.24
.navi li:hover a {...}
.navi li:hover a:before {...}
위에처럼 li에 호버를 하면 li는 너비가 100%라서 그렇게 됩니다.
영상에 코드를 자세히 보시면 아래처럼 a에 호버를 했습니다.
그래야 a가 가지고 있는 텍스트 만큼만 호버 영역이 됩니다.
.navi li a:hover {...}
.navi li a:hover:before {...}
khhan1990
질문자2022.05.24
선생님 댓글 감사합니다.
다만, li 태그가 아닌a 태그에 hover를 했음에도 불구하고 똑같은 현상이 발생합니다.
이는 제가 작성한 코드가 아닌 선생님께서 제공해주신 코드로 실행했을 때도 같은 문제가 발생하는데,
만약 선생님께서는 그런 문제가 없는데 저한테만 이런 문제가 발생하는 거라면 브라우저 호환성의 문제일까요?
현재 저는 크롬을 사용하고 있습니다.
khhan1990
질문자2022.05.25
선생님 제 github 주소 올리겠습니다!
https://github.com/Kyu-holic/mouse-hover-background-change-jQuery.git
감사합니다!
답변 1