CSS - Tạo một div "có thể nhấp"

Question

Tôi muốn biết cách tôi có thể hiển thị một div có thể nhấp (như một liên kết, với bàn tay nhỏ khi tôi tiếp tục bằng chuột).

Tôi có một số yếu tố như thế này:

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

Với jQuery này:

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

Cheers

Answer 1

Bạn đã làm cho nó nhấp được trong ví dụ của bạn. Nếu bạn muốn nó để "nhìn" nhấp được, bạn có thể thêm một số CSS:

.teamSelector { cursor: pointer; } 

Hoặc tiếp tục với jQuery:

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

Here is W3 trường tài liệu tham khảo cho các tài sản con trỏ.

Answer 2

Bạn không thể, chỉ cần làm cho liên kết và tạo kiểu cho nó? Nó sẽ dễ dàng và dễ tiếp cận hơn.

Answer 3

Các css cho nó là:

.teamSelector 
{ 
    cursor: pointer 
} 

Bạn cũng có thể thêm các hiệu ứng di chuột, nhưng tôi không chắc chắn nếu: hoạt động sẽ làm việc qua trình duyệt.

Nếu bạn cần thứ gì đó có thể nhấp được, bạn nên sử dụng kiểu dáng và kiểu dáng button hoặc a. Bạn luôn có thể ngăn chặn hành động mặc định bằng javascript. Lý do tốt hơn là khả năng truy cập để người dùng có trình đọc màn hình biết rằng có điều gì đó để tương tác.

Chỉnh sửa để thêm: Khi bạn tab qua một trang, bạn có thể nhấn phím cách để click một phần tử. Điều này sẽ không hoạt động giống nhau trên các phần tử không tương tác, do đó, bất kỳ ai sử dụng chức năng đó sẽ không thể sử dụng bất kỳ thứ gì bạn đang tạo.

Answer 4

câu hỏi này là khá cũ nhưng cần một số bổ sung:

nếu bạn muốn quấn thành phần với tương tác người dùng dựa trên con trỏ, bạn nên thích yếu tố nút thay vì một div (bạn vẫn có thể hiển thị nó block).

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

phong cách:

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