Измените курсор мыши при наведении указателя мыши на стиль привязки


110

Если я наведу указатель мыши divна значок, он изменится на курсор, как в привязке HTML.

Как я могу это сделать? Нужен ли мне Javascript или это возможно только с CSS?

Ответы:


222

Предполагая, что у вас divесть id="myDiv", добавьте следующее в свой CSS. В cursor: pointerуказывает , что курсор должен быть той же рукой значок , который является использование для анкеров (гиперссылок):

CSS для добавления

#myDiv
{
    cursor: pointer;
}

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

<div style="cursor: pointer">

</div>

РЕДАКТИРОВАТЬ:

Если вы решили использовать для этого jQuery, добавьте следующую строку в свой $(document).ready()или body onload: (замените myClassна любой класс все ваши divобщие ресурсы)

$('.myClass').css('cursor', 'pointer');

Я хочу сделать это с помощью Jquery не CSS
shibly

7
@guru: Нет необходимости писать скрипты. Все, что вам нужно сделать, это добавить style="cursor: pointer"в свой divHTML. Отредактирую свой ответ примером.
Девин Берк

Есть пять подразделений с одним и тем же классом, я не могу добавить ко всему этому "style =" cursor: pointer "
вероятно,

@guru, если все div имеют один и тот же класс, то вы можете добавить «курсор: указатель» к правилу CSS для этого класса в файле CSS вашей страницы
атака

1
если проблема заключается в нацеливании, то, как уже просил Джастин, и, как каждый всегда должен спрашивать, ОТПРАВЬТЕ КОД, чтобы мы могли помочь вам прикрепить его
Синетета

24

Если вы хотите сделать это в jQuery вместо CSS, вы в основном следуете тому же процессу.

Предполагая, что они у вас есть <div id="target"></div>, вы можете использовать следующий код:

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

и это должно сработать.


3
Это лишнее , потому что курсор для divявляется только видимой , когда мышь находится над ним. Нет причин удалять его, когда пользователь зависает, потому что курсор все равно не будет виден в это время.
Девин Берк,

2
Хотя вопрос был задан очень узко (о DIV), этот ответ применим в широком смысле. Это полезно для любого элемента HTML, такого как таблицы, <p>, кнопки и т. Д. Вот почему я поставил ему +1.
PeteH

10

На самом деле вам не нужен jQuery, только CSS. Например, вот HTML:

<div class="special"></div>

А вот CSS:

.special
{
    cursor: pointer;
}


0

Я думаю, что :hoverв приведенных выше ответах не было. Таким образом, следующее будет делать необходимое. (Если требуется css)

#myDiv:hover
{
    cursor: pointer;
}

Работал для меня без: hover и, предположительно, многих других, поскольку ответ получил много положительных голосов. Вы пробовали?
dading84
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.