CSS - Utwórz div "klikalny"

Question

Chciałbym wiedzieć, jak mogę renderować klikę div (jak link, z małą ręką, gdy przejdę myszką).

mam pewne elementy tak:

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

Z tego jQuery:

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

Cheers

Answer 1

Już wykonane jest klikalny na swoim przykładzie. Jeśli chcesz go do „wygląd” klikalny, można dodać trochę CSS:

.teamSelector { cursor: pointer; } 

lub kolejnym jQuery:

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

Here is szkołach W3 odniesienia dla właściwości kursora.

Answer 2

Nie możesz po prostu zrobić z tego linku i nadać mu stylu? Byłoby łatwiej i łatwiej dostępne.

Answer 3

css dla niego jest:

.teamSelector 
{ 
    cursor: pointer 
} 

Można również dodać efekty wskaźnikiem, ale nie jestem pewien, czy: aktywny będzie działać cross-browser.

Jeśli potrzebujesz czegoś do kliknięcia, lepiej jest użyć elementu i stylizacji button lub a. Zawsze możesz zapobiec domyślnej akcji za pomocą javascript. Powodem, dla którego jest to lepsze, jest dostępność, aby użytkownicy z czytnikami ekranu wiedzieli, że jest coś do interakcji.

Edytuj, aby dodać: Po przejściu przez stronę możesz nacisnąć spację, aby przejść do elementu click. To nie będzie działać na elementach nieinteraktywnych, więc każdy, kto użyje tej funkcji, nie będzie mógł użyć tego, co robi.

Answer 4

to pytanie jest dość stary, ale wymaga pewnych uzupełnień:

jeśli chcesz zawinąć komponent z interakcji użytkownika wskaźnika opartego powinien wolisz elementu przycisku zamiast div (nadal można go block wyświetlacz).

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

style:

.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 
}