Пользовательское изображение курсора только для одного div

Question

Я пытаюсь создать собственный курсор для определенного div, но код делает курсор обычным для всей страницы, я не мог понять это, вы можете мне помочь?

Я просто хочу, чтобы пользовательский курсор находился только в «контейнере», который был фиолетовым.

спасибо.

http://jsfiddle.net/k6nb0hss/

$(document).ready(function(){console.log($("container").length) 
$("div").css('cursor','url(http://icons.iconarchive.com/icons/fasticon/beach/128/shark-icon.png),auto'); 
}); 

Answer 1

Если вы используете $('div') он будет применять для каждого сНу элемента. Вместо этого вы должны использовать селектор идентификаторов или селектор классов. Сделайте это:

$("#container").css('cursor','url(http://icons.iconarchive.com/icons/fasticon/beach/128/shark-icon.png),auto'); 

Изменено вопрос с идентификатором # использования этого класса с использованием .. Читайте в кратком Jquery Selector

DEMO

---

Вы также можете сделать это без Jquery с простой CSS:

#container { 
    width:960px; 
    height:100vh; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    background-color:#7E33DB; 
    cursor: url(http://icons.iconarchive.com/icons/fasticon/beach/128/shark-icon.png),auto /*added */ 
} 

CSS DEMO

Answer 2

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

$("div#container") 

вместо

$("div") 

Ваш селектор, $("div") применяет CSS для каждого сНу элемента на странице. С помощью $("div#container") или $("#container") вы выбираете нужный элемент, определяющий его идентификатор.

Answer 3

Если вы хотите применить пользовательский курсор к определенному div, то пользовательский div id/class в js, где вы меняете курсор.