Сделать курсор рукой, когда пользователь наводит курсор на элемент списка

Question

У меня есть список, и у меня есть обработчик щелчка для его элементов:

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Как я могу изменить указатель мыши на указатель руки (как при наведении курсора на кнопку)?Прямо сейчас указатель превращается в указатель выделения текста, когда я наводю указатель мыши на элементы списка.

Answer 1

Просто сделайте что-то вроде этого:

li { 
  cursor: pointer;
}

Я применяю его к вашему коду, чтобы увидеть, как он работает:

li {
  cursor: pointer;
}

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

Примечание: Также НЕ забудьте, что у вас может быть любой курсор в виде руки с настроенным курсором, вы можете создать фаворзначок руки, например, такой:

div {
  display: block;
  width: 400px;
  height: 400px;
  background: red;
  cursor: url(http://findicons.com/files/icons/1840/free_style/128/hand.png) 4 12, auto;
}

<div>
</div>

Answer 2

Для того, чтобы сделать что-либо, получающее обработку "mousechange", вы можете добавить класс CSS:

.mousechange:hover {
  cursor: pointer;
}

<span class="mousechange">Some text here</span>

Я бы не сказал использовать cursor:hand, поскольку он действителен только для Internet Explorer 5.5 и ниже, а Internet Explorer 6 поставлялся с Windows XP (2002). Люди получат подсказку для обновления, когда их браузер перестанет работать на них. Кроме того, в Visual Studio он будет подчеркивать эту запись красным цветом. Это говорит мне:

Проверка (CSS 3.0): «рука» не является допустимым значением для «курсора» свойство

Answer 3

ul li:hover{
   cursor: pointer;
}

Answer 4

Использование:

ul li:hover{
   cursor: pointer;
}

Чтобы узнать больше событий мыши, отметьте Свойство CSS-курсора .

Answer 5

Во всех других ответах предлагается использовать стандартный указатель CSS, однако есть два метода:

1. Применить свойство CSS cursor:pointer; к элементам.(Это стиль по умолчанию при наведении курсора на кнопку.)

2. Примените свойство CSS cursor:url(pointer.png);, используя пользовательскую графику для указателя.Это может быть более желательным, если вы хотите, чтобы взаимодействие с пользователем было одинаковым на всех платформах (вместо того, чтобы позволить браузеру / ОС решать, как должен выглядеть курсор вашего курсора).Обратите внимание, что резервные параметры могут быть добавлены в случае, если изображение не найдено, включая дополнительные URL-адреса или любые другие параметры, например cursor:url(pointer.png,fallback.png,pointer);

Конечно, они могут применяться к элементам спискатаким образом li{cursor:pointer;}, как класс .class{cursor:pointer;} или как значение атрибута стиля каждого элемента style="cursor:pointer;".

Answer 6

Вы можете использовать одно из следующих:

li:hover
{
 cursor: pointer;
}

или

li
{
 cursor: pointer;
}

Рабочий пример 1:

    li:hover
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Рабочий пример 2:

    li
    {
     cursor: pointer;
    }

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Answer 7

Вы также можете использовать следующий стиль:

li {
    cursor: grabbing;
}

Answer 8

Вы можете использовать код ниже:

li:hover { cursor: pointer; }

Answer 9

Использование HTML-хака

Примечание: это не рекомендуется, поскольку считается плохой практикой

Оборачивание содержимого в тег привязкисодержащий атрибут href будет работать без явного применения свойства cursor: pointer; с побочным эффектом свойств привязки (исправлено с помощью CSS):

<a href="#" style="text-decoration: initial; color: initial;"><div>This is bad practice, but it works.</div></a>

Answer 10

Для базового символа руки:

Попробуйте

cursor: pointer 

Если вам нужен символ руки, например, перетащите какой-нибудь предмет и бросьте его, попробуйте:

cursor: grab