如何在CSS中使用拖动？

Question

我有一个大小为500x250px的div。将任何元素拖到其上时，其边框应更改颜色。我试图在CSS中使用拖动来实现这种效果，但我无法让它工作。

#element{
   width:500px;
   height:250px;
   border:2px solid orange;
}

#element::drag-over{
  border-color:red !important;
}

<div id="element"></div>

jQuery中的解决方案：

$('input[type="file"]').on('dragover', function(){
     $(this).addClass('drag-over'); 
   }).on('drop', function (e) {   
      $(this).removeClass('drag-over'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element">
    <input type="file">
</div>

Answer 1

您应该删除额外的:：

#element::drag-over{
________^

所以它会像：

#element:drag-over{
    border-color:red !important;
}