마우스 호버했을 때 일어나는 현상
528
작성한 질문수 38
선생님 안녕하세요.
마우스를 호버했을 때 일어나는 현상에 대해서 궁금한 점이 있어서 질문 드립니다.
본 예제에서 ABOUT, CLASS, LOCATION 단어의 오른쪽 빈 공간에 마우스를 올릴 경우에도 배경이 변하는 현상이 일어납니다.
예를 들면 제가 아래에 <--->로 표시해둔 것처럼 <---->만큼의 빈 공간에 마우스를 올릴 경우에도 배경이 변경되는 현상이 일어나는데 이런 현상은 어떻게 해야 막을 수 있을까요?
ABOUT<---->
INSTRUCTOR
CLASS<----->
LOCATION<->
예전 예제 중 비슷한 경우에는 visibility: hidden을 통해서 했었지만, 이번 경우에는 그렇게 하면 단어 자체가 사라집니다.
확인해 주시면 감사드리겠습니다!!
답변 1
0
.navi li:hover a {...}
.navi li:hover a:before {...}
위에처럼 li에 호버를 하면 li는 너비가 100%라서 그렇게 됩니다.
영상에 코드를 자세히 보시면 아래처럼 a에 호버를 했습니다.
그래야 a가 가지고 있는 텍스트 만큼만 호버 영역이 됩니다.
.navi li a:hover {...}
.navi li a:hover:before {...}
0
선생님 댓글 감사합니다.
다만, li 태그가 아닌a 태그에 hover를 했음에도 불구하고 똑같은 현상이 발생합니다.
이는 제가 작성한 코드가 아닌 선생님께서 제공해주신 코드로 실행했을 때도 같은 문제가 발생하는데,
만약 선생님께서는 그런 문제가 없는데 저한테만 이런 문제가 발생하는 거라면 브라우저 호환성의 문제일까요?
현재 저는 크롬을 사용하고 있습니다.
0
선생님 제 github 주소 올리겠습니다!
https://github.com/Kyu-holic/mouse-hover-background-change-jQuery.git
감사합니다!
class 값 한 번에 부여하는법
2
95
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
80
1
div#css-checker-widget의 해결방
1
71
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
97
2
강의듣는법
1
87
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
77
2
input checked 질문합니다.
0
81
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
154
2
Part 1 영상 안나옵니다
1
101
1
제이쿼리 작동이 안됩니다
1
214
3
강의 내용 질문있습니다.
1
133
2
일정 부분만 주석하는 방법
1
229
2
폰트어썸
1
146
2
인접선택자에 대한 질문드립니다!
1
135
2
delay 적용 안됨
1
139
1
rotateY(360deg)가 적용이 안됩니다!
1
192
2
세로이동할때 height값
1
143
2
폰트어썸이 안되요..
1
509
2
화면 정중앙에 오게끔 할수있나요?
1
176
1
어코디언 네비게이션 중
1
130
1
라이브서버 문제
1
247
2
넷플릭스 어코디언 예제 질문
1
108
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
166
1
active 관련 질문
1
152
2