본문 바로가기
반응형

이벤트3

jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 mouseenter()와 mouseleave()는 요소에 마우스가 들어오거나 나갈 때 각각 이벤트를 트리거합니다. hover()와 유사하지만, mouseenter()는 이벤트 버블링이 발생하지 않아 부모 요소와 자식 요소가 중첩된 경우 더욱 세밀한 컨트롤이 가능합니다. 실용적인 예제를 몇 가지 소개합니다.    1. 버튼 강조 효과마우스가 버튼 위에 올라가면 색상이 변경되고, 벗어나면 원래 색상으로 돌아옵니다. Hover me     2. 카드 그림자 효과마우스를 카드 위에 올리면 그림자가 강조되고, 벗어나면 원래 상태로 돌아옵니다.     3. 메뉴 하이라이트네비게이션 메뉴에 마우스를 올리면 텍스트 색상과 배경색이 변경됩니다. Home About Contact     4. 이미지 캡션 .. 2024. 11. 19.
jQuery의 hover() 이벤트를 활용한 실용적인 예제들 jQuery의 hover() 메서드는 마우스가 요소 위에 올라갔을 때와 벗어났을 때 각각 다른 동작을 수행할 수 있게 해줍니다. 실용적인 예제를 몇 가지 만들어보겠습니다.    1. 네비게이션 메뉴 강조마우스를 메뉴 항목 위에 올리면 배경색과 텍스트 색상이 변경되는 간단한 네비게이션 메뉴 예제입니다.  Home About Services Contact     2. 이미지 확대 효과마우스를 이미지 위에 올리면 확대되고, 벗어나면 원래 크기로 돌아갑니다.      3. 툴팁 표시마우스를 특정 요소 위에 올리면 툴팁이 나타나는 예제입니다.  Hover over me! This is a tooltip!     4. 카드 플립 효과마우스를 카드 위에 올리면 카드가 회전하면서 뒷면이 보이는 예제.. 2024. 11. 19.
jQuery를 이용한 브라우저 종료 이벤트 jQuery를 이용한 브라우저 종료 이벤트   jQuery를 사용하여 브라우저 종료 이벤트를 처리하고자 할 때, 사실 직접적으로 브라우저 종료를 감지할 수 있는 방법은 없습니다. 하지만 window.onbeforeunload 이벤트를 사용하여 사용자가 페이지를 떠나거나 브라우저를 닫기 전에 실행할 코드를 지정할 수 있습니다. onbeforeunload 이벤트 사용onbeforeunload 이벤트는 사용자가 페이지를 떠날 때 발생합니다. 페이지를 새로고침하거나 다른 페이지로 이동하거나, 브라우저를 닫으려고 할 때 이 이벤트가 발생합니다. $(window).on('beforeunload', function(event) { // 이 함수 안에서 수행할 작업을 여기에 추가합니다. // 예: 데이터를 .. 2024. 9. 4.