CSS - div를 "클릭 가능"으로 만들기

Question

div를 클릭 할 수있는 방법을 알고 싶습니다. 마우스로 이동할 때 작은 손으로 링크를 만들 수 있습니다. 이 jQuery로

<div class="teamSelector">Some</div> 

:

$('.teamSelector').click(function() { 
    // some functions 
}); 

건배

Answer 1

당신은 이미 예제는 클릭했습니다

는이 같은 몇 가지 요소가있다.

.teamSelector { cursor: pointer; } 

또는 jQuery를 계속 : 커서 속성에 대한

.click(function() { do something }).css("cursor", "pointer"); 

Here is W3 학교 참조 당신이 클릭 할 수있는 "모양"하고 싶은 경우에, 당신은 몇 가지 CSS를 추가 할 수 있습니다.

Answer 2

링크를 만들고 스타일을 지정할 수는 없습니까? 그것은 더 쉽고 접근하기 쉬울 것입니다.

Answer 3

그것의 CSS는 다음과 같습니다 또한 호버 효과를 추가 할 수 있습니다,하지만 난 잘 모르겠어요

.teamSelector 
{ 
    cursor: pointer 
} 

: 활성 크로스 브라우저를 작동합니다.

클릭할만한 것이 필요한 경우 button 또는 a 요소를 사용하고 스타일을 지정하는 것이 좋습니다. 당신은 언제나 javascript로 디폴트 액션을 막을 수 있습니다. 더 나은 이유는 접근성 때문이며 화면 판독기를 사용하는 사용자는 상호 작용할 대상이 있음을 알게됩니다.

편집 도구 추가 : 페이지를 탭 이동할 때 스페이스 바를 눌러 click 요소를 사용할 수 있습니다. 이것은 비대화 형 요소에서 동일하게 작동하지 않으므로이 기능을 사용하는 모든 사람은 자신이하는 모든 것을 사용할 수 없습니다.

Answer 4

이 질문은 꽤 오래하지만 일부 추가해야합니다 : 당신이, 당신이 대신 div의 버튼 요소를 (당신은 여전히 ​​block를 표시 할 수 있습니다)을 선호한다 포인터 기반의 사용자 상호 작용 요소를 포장하려는 경우

합니다.

<button class="teamSelector" tabindex="1">Some</button> 

스타일 : 포인터 크로스 브라우저 :

.teamSelector{ 
    user-select: none; // this sets the element unselectable, unlike texts 
    cursor: pointer; // changes the client's cursor 
    touch-action: manipulation; // disables tap zoom delaying for acting like real button 
    display: block; // if you want to display as block element 
    background: transparent; //remove button style 
    border: 0; //remove button style 
}