Как изменить курсор на изображении при перемещении мыши

Question

В приложении Angular 7 я пытаюсь реализовать стрелки влево и вправо для слайд-шоу изображений. Если мышь находится на левой половине изображения, она должна показывать стрелку влево и стрелку вправо на правой половине. Нажатие на изображение затем приведет пользователя к следующему или предыдущему изображению в массиве изображений. Примерно так: https://wells-demo.squarespace.com/human-nature-wells/uml9t64gkm48jijkt8y6slmtd0jush

<img src="url" (click)="navigate()">

Я пытался что-то настроить с помощью @HostListener, но не могу понять, как это сделать.

urls = [url1, url2, url3, ....url10];
currIndex = 2;
url = urls[currIndex];

    @HostListener('mousemove', ['$event'])
        onMouseMove(event: MouseEvent) {
            //console.log(event.pageX);
            //console.log(this.el.nativeElement.offsetLeft);
            //not completely sure what to do here...

        }

navigate() {
  if (leftHalf) { //how to figure this out?
     prevImage();
  } else {
     nextImage();
  }

nextImage() {
   this.url = this.urls[this.currIndex + 1];
}

prevImage() {
  this.url = this.urls[this.currIndex - 1]
}

1) Как изменить курсор мыши на стрелку влево в зависимости от положения? 2) Как определить, была ли нажата левая или правая половина?

Цените любую помощь, которую я могу получить по этому поводу!

Answer 1

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

.left_div{
cursor:w-resize;
float:left
}

.right_div{
cursor:n-resize;
float:right
}

<div class="left_div">this is left div</div>
<div class="right_div">this is right div</div>

Answer 2

Используйте offsetWidth элемента и offsetX события mousemove.

if(event.offsetX > element.offsetWidth / 2) {
  // right half
} else {
  // left half
}

Чтобы изменить указатели, вы должны использовать класс add / remove, используя свойство курсора. См. Это https://css-tricks.com/using-css-cursors/