Изменить курсор на указатель пальца

У меня есть это a, и я не знаю, что мне нужно вставить в "onmouseover", чтобы курсор изменился на указатель пальца, как на обычную ссылку:

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>

Я где-то читал, что мне нужно поставить:

onmouseover="cursor: hand (a pointing hand)"

Но это не работает для меня.

Плюс я не уверен, что это считается JavaScript, CSS или просто HTML.

Ответ 1

<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>

Это css.

Или в таблице стилей:

a.menu_links { cursor: pointer; }

Ответ 2

Вы можете сделать это в CSS:

a.menu_links {
    cursor: pointer;
}

Это действительно поведение по умолчанию для ссылок. Вы должны либо каким-то образом переопределить его в другом месте вашего CSS, либо там нет атрибута href (он отсутствует в вашем примере).

Ответ 3

Мне нравится использовать этот, если у меня есть только одна ссылка на странице:

onMouseOver="this.style.cursor='pointer'"

Ответ 4

в css писать

a.menu_links:hover{ cursor:pointer}

Ответ 5

Вот что-то круто, если вы хотите пройти лишнюю милю с этим. в URL-адресе вы можете использовать ссылку или сохранить изображение png и использовать путь. например:

URL ( 'активы/ГИМ/theGoods.png');

ниже приведен код:

.cursor{
  cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}

Таким образом, это будет работать только под размером 128 X 128, больше, и изображение не будет загружаться. Но вы можете практически использовать любое изображение, которое хотите! Это будет считаться чистым css3 и некоторым html. все, что вам нужно сделать в html, - это

<div class='cursor'></div>

и только в том div, который отобразит этот курсор. Поэтому я обычно добавляю его в тег body.

Ответ 6

Я думаю, что "лучший ответ" выше, хотя и программно точный, на самом деле не отвечает на поставленный вопрос. в вопросе спрашивается, как изменить указатель в событии mouseover. Я вижу сообщения о том, как может быть ошибка, где-то не отвечает на вопрос. В принятом ответе событие mouseover пусто (onmouseover=""), и вместо этого включена опция стиля. Не понимаю, почему это было сделано.

В ссылке на запрос может быть ничего плохого. рассмотрим следующий html:

<a id=test_link onclick="alert('kinda neat);">Click ME!</a>

Когда пользователь нажимает на эту ссылку, указатель не будет меняться на руку... вместо этого указатель будет вести себя так, как будто он зависает над обычным текстом. Возможно, этого не захочется... и так, нужно указать указателю мыши на изменение.

искомый ответ - это (который был отправлен другим):

<a id=test_link onclick="alert('Nice!');"
       onmouseover="this.style.cursor='pointer';">Click ME!</a>

Однако, это... кошмар, если у вас их много, или используйте такие вещи повсюду, и решите сделать какое-то изменение или наткнуться на ошибку. лучше сделать для него класс CSS:

a.lendhand {
  cursor: pointer;
}

то

<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>

существует много других способов, которые, возможно, были бы лучше, чем этот метод. DIV s, КНОПКА s, IMG и т.д. могут оказаться более полезными. Я не вижу вреда при использовании <a>...</a>.

Джаррете.

Ответ 7

Добавьте атрибут href, чтобы сделать его допустимой ссылкой и return false; в обработчике событий, чтобы он не вызывал навигацию;

<a href="#" class="menu_links" onclick="displayData(11,1,0,'A'); return false;" onmouseover=""> A </a>

(Или сделать displayData() return false и ..="return displayData(..)

Ответ 8

Решение через чистый CSS как указано в ответе, обозначенном как наилучшее не подходит для этой ситуации.

В примере в этом разделе нет обычного атрибута static href, это вызов только JS, поэтому он не сделает ничего без JS.

Поэтому полезно включать указатель только с JS. Итак, решение

onMouseOver="this.style.cursor='pointer'"

как упоминалось выше (но я не могу комментировать там), является лучшим в этом случае. (Но да, вообще говоря, для обычных ссылок, не требующих JS, лучше работать с чистым CSS без JS.)

Ответ 9

div{cursor: pointer; color:blue}

p{cursor: text; color:red;}
<div> im Pointer  cursor </div> 
<p> im Txst cursor </p>