Как сделать смену курсора при нажатии и отпускании левой кнопки мыши?

Question

[Иван Иванов]

Здравствуйте, подскажите пожалуйста, как сделать чтобы при нажатии кнопки мышки курсор заменялся на один вид, а при отпускани кнопки мышки на другой. Сделал вот так, но почему-то работает криво...

<div class="hand">
   <img src="/upload/iblock/436/4369bb4760bbdc1ecb06f9e5c41a04e8.jpg" alt="1" id="bx_1373509569_67857" width="100%">									
</div>

.hand{
	cursor: url(/bitrix/templates/main-new-2.0/img/hand.png), default;
}

.grab{
	cursor: url(/bitrix/templates/main-new-2.0/img/grab.png), default;
}

$( ".hand" ).mousedown(function() {
		$( ".hand" ).addClass( "grab" );
		
	});
	
	$( ".hand" ).mouseup(function() {
		$( ".hand" ).removeClass( "grab" );
	});

Answer 1

[Павло Пономаренко]

Что значит "работает криво"?
Вы видите, что у вас в классе grab в пути к картинке нету ее названия?

Может, вам подойдет css-only решение:

.hand {
  cursor: url(/bitrix/templates/main-new-2.0/img/hand.png), default;
}
.hand:active {
  cursor: url(/bitrix/templates/main-new-2.0/img/grab.png), default;
}

Comments

[Иван Иванов]

это опечатка ^_^ по факут пусть прописан правильно ) Просто пробовал разные варианты с классами и лишний раз нажал ctrl-z

[Иван Иванов]

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

[Павло Пономаренко]

Иван Иванов, см. изменение ответа

Answer 2

[Иван Иванов]

Разобрался надо было сделать вот так :

<div class="hand" onmousedown="handChange();" onmouseup="grabChange();">
...
</div>

function handChange(){
	$(".hand").addClass("grab");
}
	
function grabChange(){
	$(".hand").removeClass("grab");
}

Comments

[Павло Пономаренко]

На самом деле это не совсем правильно. ВСЕ элементы с классом .hand будут добавлять и убирать класс grab. Думаю, вы искали что-то такое:

$( ".hand" ) // обратите внимание на $(this)
  .mousedown(function() { $(this)   .addClass( "grab" ); })
  .mouseup  (function() { $(this).removeClass( "grab" ); });

Answer 3

[Дмитрий Арушанов]

А какова последовательность этих классов в css?