[HTML & CSS] Hover의 이벤트들 cursor의 속성들.

 Hover란?

css에서는 스킨처럼 외형을 디자인하는 기능 뿐만 아니라 마우스의 클릭, 요소 위로 올라가는 등의 액션이 있을 때

이벤트를 추가할 수 있습니다.

여기서 말하는 Hover는 마우스를 요소에 이동시켰을 때 어떤 이벤트를 발생시킬지 지정할 수 있게 해주는 역할을 수행합니다.

.news-title{
    color: #000;
    border-bottom: none;
}

.news-title:hover{
    color: blue;
    border-bottom: 1px solid #000;
    cursor: pointer;
    font-weight: 600;
}

위의 css를 적용한 스타일은 

마우스를 올리기 전

마우스를 올린 후

기본 스타일에서는 color: #000;  border-bottom: none; 을 적용해서 글자가 검은색에 밑줄 없음이었는데

마우스를 올리자마자 :hover에서 지정해준 내용대로 글자는 파란색에 밑줄이 잘 동작하는 모습을 볼 수 있습니다.

이외에도  cursor: pointer; 를 이용해서 마우스 포인터를 갖다댔을 때 손모양으로 바꿀수도 있으며

font-weight의 변화를 주어 마우스를 올렸을 때 글자가 더 강조되는 효과를 보일수도 있습니다.

 

 cursor 속성의 종류

※ cursor : option 이런 식으로 사용이 됩니다.

모든 속성을 다 살펴보진 않을 생각이고, 그나마 궁금했던 속성들을 정리해두려고 합니다.

cursor 속성은 꼭 hover와 조합이 되라는 법은 없으며 focus나 이외의 태그에서도 하위속성으로 사용될 수 있습니다.

한가지 주의점은 여기서 커서의 모습만 바꾼다고 해서 그 커서가 해당 역할을 수행하는 것은 아닙니다.

예를 들어 cursur 속성에서 copy를 적용한다고 해도 그에 해당하는 모습으로 커서의 모습을 바꿀뿐이지

그 의미에 해당하는 무엇인가 복사하는 명령은 수행되지 않습니다. 그냥 커서의 모양만 바꾸는 속성입니다.

 

1. alias

마우스커서 우상단에 작은 우상향의 검은 마우스커서를 생성합니다.

2. cell

마우스커서를 두꺼운 십자가 형태로 바꿉니다.

3. copy

마우스커서 우상단에 작은 플러스 표시(+)를 생성합니다.

4.crosshair

마우스커서를 가늘고 긴 십자가 형태로 바꿉니다.

5. grab

마우스커서를 손바닥을 펼친 모양, 장갑 모양으로 바꿉니다.

6. grabbing

마우스커서를 손바닥을 꽉쥔 모양, 주먹 모양으로 바꿉니다.

7. help

마우스커서 우하단에 물음표(?)를 생성합니다.

8. none

마우스커서를 보이지 않게 합니다.

9. not-allowed

마우스커서를 붉은색(red)의 금지 모양으로 바꿉니다.

10. pointer

위의 예제에서 사용했던 속성입니다. 마우스커서를 손가락 하나만 핀 클릭 직전 모양으로 바꿉니다.

11. wait

오른쪽의 이미지가 돌아가는 모습처럼 마우스커서를 바꿉니다.