Как установить стиль курсора на указатель для ссылок без ссылок

135

У меня есть много <a>тегов HTML без hrefатрибута для выполнения onclickвызовов JavaScript. Эти ссылки не имеют стиль указателя курсора. У них есть текстовый стиль курсора.

Как установить стиль курсора для указателя на ссылки без использования hrefатрибута?

Я знаю, что могу добавить href = "#". Я имею это во многих местах в документе HTML, и хотел бы знать, как сделать указатель стиля курсора для ссылок без использования hrefатрибута.

— Кевин
источник

Кстати, когда вы говорите «ссылка», вы имеете в виду «<a id="do_some_javascript"> test </a>»? Или это просто тег span или div, который делает некоторый JavaScript?

— Alxandr

211

в вашем файле CSS добавить это ....

a:hover {
 cursor:pointer;
}

если у вас нет файла CSS, добавьте его в заголовок вашей HTML-страницы

<style type="text/css">
 a:hover {
  cursor:pointer;
 }
</style>

Также вы можете использовать атрибут href = "", возвращая false в конце вашего JavaScript.

<a href="" onclick="doSomething(); return false;">a link</a>

это хорошо по многим причинам. SEO или если у людей нет javascript, href = "" будет работать. например

<a href="nojavascriptpage.html" onclick="doSomething(); return false;">a link</a>

@ смотри http://www.alistapart.com/articles/behavioralseparation

Редактировать: Стоит отметить, что ответ @ BalusC, в котором он упоминает :hover, не является необходимым для варианта использования ОП. Хотя другой стиль можно добавить с помощью :hoverселектора.

— Росс
источник

5

Использование: hover не обязательно, и не обязательно работать с ссылками без href.

— Alxandr

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

— Росс

1

Прошло довольно много времени с тех пор, как я использовал это, но для <IE6, возможно, стоило бы добавить условный комментарий для ссылки на стили,cursor: hand;

— Дэвид говорит восстановить Monica

Вам не нужен условный комментарий - просто сделайте .myStyle {курсор: рука; курсор: указатель;} - более новые браузеры будут игнорировать атрибут руки, так как они все равно его не понимают. Также IE6 все еще будет понимать указатель - рука для ie5 и ниже.

— easwee

Использование a само по себе может вызвать некоторые проблемы. Особенно в IE, потому что они запускают OnBeforeUnload, даже если вы добавляете return false; Даже ссылка на javascript: void (0); вызывает OnBeforeUnload для вызова. У меня была

— сильная

16

Просто добавьте это в свой глобальный стиль CSS:

a { cursor: pointer; }

Таким образом, вы больше не зависите от стиля курсора по умолчанию в браузере.

— BalusC
источник

Не работает Курсор меняется на textвместо pointerChrome.

— Жека Козлов,

8

style = "курсор: указатель;"

— mxmissile
источник

6

Вот как изменить курсор со стрелки на руку, когда вы наводите курсор мыши на заданный объект object(myObject).

myObject.style.cursor = 'pointer';

— Лу
источник

1

Прежде всего, добро пожаловать на ТАК, Лу! При публикации / ответе, пожалуйста, будьте максимально информативны и не забудьте отформатировать примеры кода (как я сделал для вас).

— Брайан

4

Дайте им всем общий класс (например, ссылку). Затем добавьте в css-файл:

.link { cursor: pointer; }

Или, как подсказывает @mxmissile, сделайте это встроенным в style = "cursor: pointer;"

— Alxandr
источник

4

создайте класс со следующим CSS и добавьте его в свои теги с помощью событий onclick:

cursor:pointer;

— Дэн
источник

3

Использовать CSS cursor: pointer если я правильно помню.

Либо в вашем файле CSS:

.link_cursor
{
    cursor: pointer;
}

Затем просто добавьте следующий HTML-код к любым элементам, для которых вы хотите иметь курсор ссылки: class="link_cursor" (предпочтительный метод.)

Или используйте встроенный CSS:

<a style="cursor: pointer;">

— Энди Шеллам
источник

1

Угловая версия:

<a (click)="action(); $event.preventDefault()" href="#">Action</a>

— Чачан
источник

0

Это сработало для меня:

<a onClick={this.openPopupbox} style={{cursor: 'pointer'}}>

— BabaRick
источник