Менять курсор при нажатии левой кнопки мыши

[Igorsrt]

<style>
		div{
			width: 500px;
			height: 500px;
		}
	</style>
<div class="slider-for">слайдер</div>
	<script>

document.querySelector('.slider-for').onmousedown = e => e.target.style.cursor = 'pointer';
document.querySelector('.slider-for').onmouseup = e => e.target.style.cursor = 'default';

	</script>

благодарю!! Все просто как обычно - для тех кто знает JS ))

[j0hnik]

Igorsrt,

<style>
	div{
		background-color: red;
		width: 500px;
		height: 500px;
	}
	div:active{
		cursor: pointer;
	}
</style>

	<div class="slider-for">слайдер</div>

усовершенствованная версия

[Igorsrt]

<style>
		div{
			width: 500px;
			height: 500px;
		}
	</style>
<div class="slider-for">слайдер</div>
	<script>

document.querySelector('.slider-for').onmousedown = e => e.target.style.cursor = 'pointer';
document.querySelector('.slider-for').onmouseup = e => e.target.style.cursor = 'default';

	</script>

хотя нет, не получается так... я хочу курсор grab поставить - не срабатывает.. лучше наверно, все-таки через классы css делать

[SuperZen]

https://css-tricks.com/using-css-cur...le-header-id-1
Наведи на кнопки Happy, Sad, Meh )

[Igorsrt]

https://css-tricks.com/using-css-cur...le-header-id-1
Наведи на кнопки Happy, Sad, Meh )

мне не нужно "наведи", мне нужно "нажми левую кнопку мышки" ))

[Igorsrt]

jQuery('.slider-for').on({
  'mousedown': function (e) {
    jQuery(this).addClass('mouseDown');
    return false;
  },
  'mouseup': function () {
    jQuery(this).removeClass('mouseDown');
  }
});

в общем, в конце-концов все заработало вот с этим изначальным скриптом... Всем спасибо большое!

[SuperZen]

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

Для этого надо ставить слушатель на документ.)

[Igorsrt]

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

Для этого надо ставить слушатель на документ.)

там такая ситуация: если я нажал кнопку мышки на слайдере и нажатой перевожу курсор за его пределы (курсор при этом меняется на изначальный), потом отпускаю кнопку и обратно навожу на слайдер - то он опять как при нажатии (class="mouseDown")... это мелочи конечно - но если кто подскажет как починить, было бы супер ))

[SuperZen]

хо-хо^^ я тебя раскусил...

Для этого надо ставить слушатель на документ.)
а это можешь, "ну или на ближайшую область"?)

[j0hnik]

var el = document.querySelector('.slider-for'), flag = 0;
		el.addEventListener('mousedown', e =>{
			flag = 1;
			el.style.cursor = 'pointer';
		});
		document.addEventListener('mouseup', e =>{
			flag = 0;
			el.style.cursor = 'default';
		});
		el.addEventListener('mouseout', e =>el.style.cursor = 'default');
		el.addEventListener('mouseover' ,e=>{
			if(flag) el.style.cursor = 'pointer';
		});