[홈페이지 만들기] jQuery 마우스 이벤트

 

jQuery로 마우스 이벤트 CSS 적용하기

 

 

하도 수정하고 뜯어고치고 하느라 정리할 틈이 없어서 블로그에 과정을 업로드하진 못했지만

드디어 홈페이지 만들기가 끝났습니다~

와~ 짝짝짝

 

물론 부족한 부분도 많고 어딘가 허전하거나 조잡한 부분도 많지만

처음으로 뭔가 만들어낸 거라서 뿌듯하다.

 

뿌듯한 기념으로 홈페이지에 사용했던 jQuery 구문 중

마우스를 사용할때 일어나는 이벤트들에 따라 CSS를 변경하는 함수들을 정리해보겠다.

 

다들 일하기싫을 때, 공부하기싫을 때 마우스 움직움직 하면서 멍때리잖아요..?

나만그런가..?

 

 

---

 

아 참, 시작 전에!

 

jQuery를 사용하려면 외부에서 스크립트 파일을 가져와야하는데,

인터넷에서 쉽게 다운받을 수 있지만 나는 cdn 서버로 연결되는 링크를 사용했다.

 
xxxxxxxxxx
// cdn서버에서 jQuery 파일 불러오기 (3.3.1 ver)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

또한, jQuery를 사용할 때는 JavaScript의 window.onload() 대신 $(document).ready()를 쓴다.

 
x
<script>
    $(document).ready(function(){
        /* 여기에 사용하고자 하는 함수를 입력한다.
           이제부터 소개할 함수들을 사용할 때는 여기에 넣어주면 된다.*/
    });
</script>

 

---

 

jQuery Mouseover(), Mouseout() Method

 
x
$("h4").mouseover(function(){
    $(this).css("text-decoration", "underline");
    $(this).css("cursor","pointer");
});
​
$("h4").mouseout(function(){
    $(this).css("text-decoration", "none");
});

 

h4태그가 지정된 글씨에 마우스를 올리면(mouse over) 밑줄이 생기고

마우스 모양도 링크에 마우스를 올렸을 때 처럼 pointer로 바뀌도록 했다.

마우스를 다시 글씨에서 치우면(mouse out) 밑줄이 사라지게 했다.

 

ex)

여기에 마우스를 올려보세요.

 

---

 

jQuery Mousedown(), Mouseup() Method

 
x
$("h5").mousedown(function(){
    $(this).css("background-color", "black");
    $(this).css("color", "white");
});
​
$("h5").mouseup(function(){
    $(this).css("background-color", "white");
    $(this).css("color", "black");
});

 

h5 태그가 지정된 글씨에 마우스를 대고 ,

마우스 왼쪽버튼을 누르면(mouse down) 글자 배경은 검정, 글자는 흰색으로 바뀐다.

눌렀던 마우스 버튼을 놓으면(mouse up) 글자배경은 흰색, 글자는 검정으로 바뀐다.

 

ex)

여기를 눌러보세요.

 

---

 

마우스동작에 대한 jQuery 함수는 몇가지 더 있지만, 나는 우선 여기까지만 소개하기로 하겠다.

 

더 알아보고 싶다면 아래 사이트에 들어가보면 된다.

w3.scools.com

마우스 이벤트를 포함한 여러 이벤트에 대한 많은 함수들을 볼 수 있다.

각 이벤트들을 클릭해보면 (영어지만) 설명들도 볼 수 있고, 사이트 내에서 직접 실습해보기도 가능하다.