CSS - Сделать div "clickable"

Я хотел бы знать, как я могу отображать div-clickable (например, ссылку, с маленькой рукой, когда я перехожу с помощью мыши).

У меня есть такие элементы, как это:

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

С помощью этого jQuery:

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

Приветствия

Ответы

Ответ 1

Вы уже сделали его кликабельным в своем примере. Если вы хотите, чтобы он выглядел "clickable", вы можете добавить CSS:

.teamSelector { cursor: pointer; }

Или продолжить с помощью jQuery:

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

Здесь ссылка на W3 для свойства курсора.

Ответ 2

Разве ты не можешь просто понять, сделать это ссылкой и создать его? Было бы проще и доступно.

Ответ 3

Для этого используется css:

.teamSelector
{
  cursor: pointer
}

Вы также можете добавлять эффекты зависания, но я не уверен, что: active будет работать кросс-браузер.

Если вам нужно что-то, что можно сделать кликабельным, вам лучше использовать элемент button или a и стиль. Вы всегда можете предотвратить действие по умолчанию с помощью javascript. Причина, по которой это лучше, - это доступность, чтобы пользователи с программами чтения с экрана знали, что с ними можно что-то взаимодействовать.

Изменить для добавления: Когда вы просматриваете страницу, вы можете нажать пробел до элемента click. Это не будет работать одинаково на неинтерактивных элементах, поэтому любой, кто использует эту функциональность, не сможет использовать то, что вы делаете.

Ответ 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 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
}