일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- github
- 코드공유
- JS
- 프론트엔드
- react
- jQuery
- PROJECT
- 타입스크립트
- 비전공자
- 렛츠기릿자바스크립트
- 웹디실기
- HTML
- git
- 웹디자인기능사
- web
- 연산자
- 웹퍼블리셔
- 슬라이드전환
- 생활코딩
- 코딩독학
- Supabase
- 웹디자인기능사실기
- 세로메뉴바
- 정보처리기사
- JavaScript
- 리액트
- 실기
- 자바스크립트
- 깃
- CSS
Archives
- Today
- Total
코딩하는라민
Jquery mouseover, mouseleave VS hover 차이점 본문
728x90
반응형
Jquery mouseover, mouseleave VS hover 차이점
1. mouseover, mouseleave
- 자식 요소에도 영향(자식 요소에도 마우스 포인터가 올라가면 이벤트 동일하게 발생)
<script>
$(document).ready(function(){
$('#quickmenu li').mouseover(function(){
A
});
$('#quickmenu li').mouseleave(function(){
B
});
});
</script>
2. mouseenter
- 자신에게만 마우스 포인터가 올라갈 경우만 이벤트 발생
3. hover
- mouseenter 되었을 때, , mouseleave 되었을 때 이벤트를 각각 지정해줄 수 있음(연결해줌)
- 조건문처럼 콤마로 구분한다.
- 마우스 오버되면 슬라이드 다운, 아니면 슬라이드 업
<script>
$(document).ready(function(){
$('#quickmenu li').hover(function(){
A
}, function(){
B
});
});
</script>
728x90
반응형
'Core > Jquery' 카테고리의 다른 글
Jquery 이미지 슬라이드_상하좌우 슬라이딩 기본 (2) | 2022.09.23 |
---|---|
Jquery 이미지 슬라이드_이미지 순서대로 서서히 나타나게 (0) | 2022.09.22 |
CSS, Jquery 세로 메뉴 만들기(서브 메뉴) (0) | 2022.09.22 |
CSS, Jquery 메인메뉴, 서브메뉴 만들기 (2) | 2022.09.21 |
제이쿼리 라이브러리 다운로드 및 사용하기 (0) | 2022.09.20 |