是否有 CSS ":drop-hover" 伪 class？

Question

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

现在，我想对其进行一些自定义，方法是在将文件拖放到 input 时更改字段的背景颜色。我不能真正使用 :hover，因为即使您不拖放它也会匹配。是否有 CSS（伪class）来做到这一点？

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

今天有CSS方法吗？在 CSS 中是否有计划的方法（例如即将推出的 specs/in 当前规范但未在任何地方实施）？

Answer 1

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

有:drop和:drop()伪class，目前处于Working Draft状态

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

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

Answer 2

目前绝对没有纯粹的css 跨浏览器解决方案，用于在将元素拖放到浏览器中时更改元素的属性window。

可以通过 Javascript/jQuery 使用隐藏容器并仅在对象位于可拖动容器内时显示它来实现您在此处尝试执行的操作。

如果你想看一下，我之前保存了这个演示：

var resetTimer;

var reset = function() {
  $('#d1').hide();
};

var f = function(e) {
  var srcElement = e.srcElement ? e.srcElement : e.target;

  if ($.inArray('Files', e.dataTransfer.types) > -1) {
    e.stopPropagation();
    e.preventDefault();

    e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none';

    if (e.type == "dragover") {
      if (resetTimer) {
        clearTimeout(resetTimer);
      }
      $('#d1').show();
      console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));

    } else if (e.type == "dragleave") {
      resetTimer = window.setTimeout(reset, 25);
    } else if (e.type == "drop") {
      reset();
      alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));
    }
  }
};

document.body.addEventListener("dragleave", f, false);
document.body.addEventListener("dragover", f, false);
document.body.addEventListener("drop", f, false);

body {
  border: 1px solid black;
}

#d0,
#d2 {
  border: 1px solid black;
}

#d1 {
  border: 1px solid black;
  display: none;
  background-color: red;
}

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

<body>
  <div id="d0">drag files onto this page</div>
  <div id="d1">-&gt; drop here &lt;-</div>
  <div id="d2">and stuff will happen</div>
</body>

Answer 3

我有同样的问题，但解决方法与 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.

时起作用

Answer 4

没有CSS-解决方案。我的问题是在拖动时更改颜色（Chrome 不支持，Opera 支持）

我是这样做的：

`<input id="xyz" type="FILE" value=""  
    ondragover ="this.style.backgroundColor='#88FF88';" 
    ondragleave="this.style.backgroundColor='#FFFFFF';" 
/> 
<input type="button" onclick="srFU(this);" value="send File" />`

是否有 CSS ":drop-hover" 伪 class？

Is there a CSS ":drop-hover" pseudo-class?

html

css

css-selectors

pseudo-class