j-query) resize와 if문을 이용해서 hover기능을 구현하고자합니다.
본문
안녕하세요
윈도우 창 outerWidth 값에 따라 작동되는 hover를 만들고자 다음과 같이 코드를 작성했습니다.
다음과 같이 작성을 하였고 간단히 설명드리면
특정 태그에 호버시 outerWidth값에 따라 div를 생성하는 function과 마우스가 벗어났을 대 그 div를 제거하는 function을 만들었습니다.
그런데 이게 좀 제 의도대로 작동하지 않습니다.
먼저 1번은 브라우저가 켜지자마자 너비값을 비교하여 작동하는 함수, 2번은 사이즈가 조정되었을 때 작동하는 함수라고 하겠습니다. 위 코드 부분에 각 1번과 2번이라고 적어놨습니다.
1. 브라우저가 켜졌을 때 너비가 1024이상일 때
1) 특정태그에 호버시 1번이 작동을 합니다. 이는 콘솔창에 작동1일 찍히는 걸 확인했습니다.
2) 너비를 1023밑으로 조절하면 2번이 작동하여 콘솔창에 멈춤이 찍히는 걸 확인했습니다.
3) 그런데 다시 특정태그에 호버하면 2번의 작동2가 콘솔이 찍히는게 아니라 1번의 작동1이 찍힙니다.
2.브라우저가 켜졌을 때 너비가 1023이하일때
1) 특정태그에 호버시 아무것도 작동하지 않음을 확인했습니다.
2) 너비를 1024이상으로 조절 후 특정태그에 호버하면 2번의 작동2가 콘솔창에 찍히는 걸 확인했습니다.
3) 너비를 다시 1023으로 낮추었을 때 2번의 멈춤이 콘솔에 찍히는 걸 확인했습니다.
4) 다시 호버를 해보면 2번의 작동2가 콘솔에 찍히는 걸 확인했습니다.
제가 의도한 대로라면 1024일때 호버시 1번이 작동을 하다가 1023이하가 되면 호버시 아무것도 작동이 되지않아야 하는데 어디가 잘못된건지 잘 모르겠습니다. 해결방법에 대한 조언 부탁드리겠습니다.
답변 1
호버의 의미를 아시고 한거죠? 마우스 커서를 해당 Div에 위에 올리면 반응하는거잖아요
근데 왜 브라우저 사이즈를 1023일때 반응하게 하는건가요?
일단 마우스 호버가 아니라 마우스 이벤트 부터 찾아보세요
https://www.nextree.co.kr/p10008/
잘못 접근한것 같네요
