본문 바로가기

아싸2

[자바스크립트]마우스 오버 메서드 _ mouseenter 와 mouseover메서드의 차이점을 알아보자 mouseenter와 mouseover 자바스크립트의 마우스이벤트에는 여러 종류가 있습니다. 그 중에서도 'mouseenter'와 'mouseover'는 같은 듯하면서 살짝 다른데요. 오늘은 이 둘의 차이점에 대해 알아보는 시간을 가져보겠습니다. ■ mouseenter 마우스 커서가 요소로 들어갈 때와 나갈때 발생합니다. ■ mouseover 마우스 커서가 요소로 들어갈 때와 나갈때 발생합니다. 버블링이 적용됩니다. ■ 둘의 차이점? mouseover 이벤트는 내부 div태그 안에 들어가도 이벤트를 또 발생시킵니다. 반면, mouseenter는 문서 객체의 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생합니다. 🤷‍♂️ 버블링이 뭔가요? 한 요소에 이벤트가 발생하면, 이 요소에 할당된 .. 2022. 9. 5.
[자바스크립트 응용] 슬라이드 효과03 이미지 슬라이드 효과 03 저번 시간에 이어서 세번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 2번유형에서는 딱딱해서 밋밋한 맛을 없애기 위해서 부드럽게 전환되는 효과를 주었는데요. 5번이미지에서 다시 1번이미지로 돌아갈때 빠르게 넘어가서 보기 불편하지는 않으셨는지...(전 사실..안불편했는데...할말하않) 무튼 그래서 이번엔 5번이미지 이후에도 좌측으로 넘어가서 다시 시작하는게 아닌 표현 그대로 1~5, 1~5 순환하듯이 보이는구조를 표현해 보겠습니다! 원본 소스 보기 원본 사이트 ▶ 오늘의 유형은 말씀드렸듯이 마지막 순서에서 첫번째 순서로 다시 넘어갈때 확~!하고 넘어가는게 아니라 물 흐르듯 자연스럽게 계속해서 순환하는 구조로 짜볼게요. 그러기 위해서는 이미지를 평상시처럼 5개로만 활.. 2022. 9. 1.
반응형

HTML이미지
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지