仅在悬停时显示元素并且用户正在抓取文件

Question

我有以下设置：

一个按钮，上面写着："upload your file here"，这只是一个普通的 <input type="file" multiple>
当用户进入 finder 并想要放下文件时，我想显示一个更大的区域供他们放置文件，因为按钮不是很大。这应该仅在用户将鼠标悬停在 'bigger input' 上并且持有文件时才可用。

我该如何实施#2？

我在这个网站上看到了一个样式变化：http://www.dropzonejs.com/ 当用户 'hovers with a file' 在上传区域上方时，但一直无法弄清楚他们是如何做到的。

Answer 1

您可以使用 Javascript 进行文件放置样式更改：

检查这个 Example :

// file drag hover
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

Answer 2

将一个函数绑定到您想要监听的事件类型（dragover、dragenter、dragstart、dragend 和 dragleave）并确保此函数至少有一个参数（事件）。然后使用event.dataTransfer。如果没有关于如何实现它的更多细节，很难给出示例代码。

参考：https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

仅供参考，您提到的 dropzonejs 使用：

return function(e) {
  var efct;
  try {
    efct = e.dataTransfer.effectAllowed;
  } catch (_error) {}
  e.dataTransfer.dropEffect = 'move' === efct || 'linkMove' === efct ? 'move' : 'copy';
  noPropagation(e);
  return _this.emit("dragover", e);
}

以上代码绑定到 "dragover"

仅在悬停时显示元素并且用户正在抓取文件

Only display element on hover and user is grabbing file

html

css

input-type-file