有没有CSS“:drop-hover”伪类？

Question

说我有一个 input type="file" 字段。可以将文件拖放到这个 input （就像在 Firefox 中一样），而不是单击“浏览”并选择文件。

现在，我想稍微自定义一下，方法是在将文件放入 input 时更改字段的背景颜色。我不能真正使用 :hover 因为即使你不拖放它也匹配。是否有 CSS（伪类）可以做到这一点？

如果不接受被丢弃的文件，是否有一种 CSS 方式来设置不同的样式？比如说，如果该字段仅接受使用 accept 属性的 PNG 文件，如果您要在其上放置 PNG 文件，我会将字段设置为绿色，如果是另一种类型的文件，则设置为红色。

今天有 CSS 方法来做这些吗？在 CSS 中是否有计划的方法（比如在即将到来的规范中/在当前规范中但没有在任何地方实现）？

原文由 Xenos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新：感谢@Renato 的评论，根据 https://github.com/w3c/csswg-drafts/issues/2257 ，drop 伪类现在已被删除。

---

有 :drop 和 :drop() 伪类，目前处于 工作草案 状态。

根据[版主：已删除垃圾邮件链接]，浏览器支持不好。

对于“不接受正在删除的文件”的情况， :drop(invalid active) 有望在未来工作。

原文由 shaochuancs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我有同样的问题，但解决方法与 nashcheez 略有不同。不过，仍然使用 JavaScript（我在这里使用 jQuery 来简化事情）：

 function drag(ev) {
  ev.dataTransfer.setData("text", "foo");
}

function allowDrop(ev) {
  $(ev.target).attr("drop-active", true);
  ev.preventDefault();
}

function leaveDropZone(ev) {
  $(ev.target).removeAttr("drop-active");
}

function drop(ev) {
  ev.preventDefault();
  $(ev.target).removeAttr("drop-active");
  alert(ev.dataTransfer.getData("text"));
}

 #draggableItem {
  height: 50px;
  width: 150px;
  background-color: #eee;
}

#dropZone {
  height: 50px;
  width: 150px;
  background-color: #efe;
}

#dropZone[drop-active=true] {
  box-shadow: inset 0px 0px 0px 2px #00C;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="draggableItem" draggable="true" ondragstart="drag(event);">Drag Me</div>

<div id="dropZone" ondragover="allowDrop(event);" ondragleave="leaveDropZone(event);" ondrop="drop(event);">Drop Here</div>

我已经在 Safari、Firefox 和 Chrome 上测试过这个，但我还没有尝试过 IE。我可能违反了自定义属性的规则，但它似乎在我等待 CSS4 时起作用。

原文由 TobyRush 发布，翻译遵循 CC BY-SA 3.0 许可协议