angular 6检测鼠标经过文件

Question

我在做我自己的文件上传下载区。

我可以很容易地将变量设置为true或false，如下所示：

<div (mouseenter)="dropzoneHovered = true" (mouseleave)="dropzoneHovered = false">

但当我将鼠标悬停在要删除的文件上时，这不会触发：

​

​

我如何才能检测到这种类型的悬停而不是无文件的悬停？

(它是唯一应该触发动画和事件的类型)

Answer 1

你要找的是dragenter和dragleave。将您的模板更改为此模板，并尝试在其上拖动一个文件：

<div (dragenter)="dropzoneHovered = true" (dragleave)="dropzoneHovered = false">

但请注意，当您将文本拖到目标上时，也会触发此操作。要解决这个问题，可以使用像this solution from css-tricks这样的东西。这是一个快速的example of this running in an Angular app on stackblitz。尝试将文本/文件拖到每个div上，并观察结果。