如何通过鼠标移动更改图像上的光标

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

利用元素的offsetWidth和mousemove事件的offsetX。

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

要更改指针的指针，必须使用cursor属性使用add / remove类。引用此https://css-tricks.com/using-css-cursors/