Html 是否有 CSS “:drop-hover” 伪类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42853699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS ":drop-hover" pseudo-class?
提问by Xenos
Saying I have an input type="file"field. One can drop a file on this input(like in Firefox) instead of clicking "browse" and selecting the file.
说我有一个input type="file"领域。人们可以在此上放置一个文件input（如在 Firefox 中），而不是单击“浏览”并选择该文件。
Now, I want to customize it a bit, by changing the field's background color when one is about to drop a file in the input. I cannot really use :hoversince it matches even when you're not drag&dropping. Is there a CSS (pseudo-class) to do that?
现在，我想对其进行一些自定义，通过在将文件放入input. 我无法真正使用，:hover因为即使您不拖放它也能匹配。是否有 CSS（伪类）来做到这一点？
And is there a CSS way to style different if the file being dropped is not accepted and if it is? Say, if the field accepts only PNG files using acceptattributes, I would make the field green if you're about to drop a PNG file on it, and red if that's another type of file.
如果不接受被删除的文件，是否有一种 CSS 方式来设置不同的样式？比方说，如果该字段仅接受使用accept属性的PNG 文件，如果您要在其上放置 PNG 文件，我会将字段设置为绿色，如果这是另一种类型的文件，则设置为红色。
Is there a CSSway to do these today? Is there a planned way to do so in CSS(like in upcoming specs/in current specs but not implements anywhere)?
今天有CSS方法来做这些吗？在CSS 中是否有计划的方法（比如在即将到来的规范/当前规范中，但没有在任何地方实现）？
采纳答案by shaochuancs
UPDATE: Thanks to @Renato's comment, according to https://github.com/w3c/csswg-drafts/issues/2257, the drop pseudo-class has been dropped now.
更新：感谢@Renato 的评论，根据https://github.com/w3c/csswg-drafts/issues/2257，现在已经删除了 drop 伪类。
There is :dropand :drop()pseudo-class, which is currently in Working Draftstatus.
有:drop和:drop()伪类，目前处于工作草案状态。
According to http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php, the browser support is not good.
根据http://css4.rocks/selectors-level-4/drag-and-drop-pseudo-class.php，浏览器支持不好。
For "file being dropped is not accepted" case, :drop(invalid active)is expected to work, in future.
对于“文件被丢弃不被接受”的情况，:drop(invalid active)预计将来会起作用。
回答by TobyRush
I had the same question and solved it a little differently than nashcheez. Still using JavaScript, though (I used jQuery here to simplify things):
我有同样的问题，解决它的方式与 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>I've tested this on Safari, Firefox and Chrome, but I haven't tried IE. I'm probably breaking a rule with the custom attribute, but it seems to work while I'm waiting for CSS4.
我已经在 Safari、Firefox 和 Chrome 上测试过这个，但我没有尝试过 IE。我可能违反了自定义属性的规则，但它似乎在我等待 CSS4 时起作用。
回答by nashcheez
There is absolutely no pure css cross-browsersolution currently for changing element's properties when dragging and dropping elements into the browser window.
目前绝对没有纯 css跨浏览器解决方案用于在将元素拖放到浏览器窗口时更改元素的属性。
What you are trying to do here can be achieved by Javascript/jQuery using a hidden container and showing it only when the object is inside the draggable container.
您在这里尝试做的事情可以通过 Javascript/jQuery 使用隐藏容器来实现，并且仅当对象位于可拖动容器内时才显示它。
There is this demo I had saved earlier if you would like to have a look into:
如果你想看看，我之前保存了这个演示：
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">-> drop here <-</div>
<div id="d2">and stuff will happen</div>
</body>