`:-moz-drag-over` CSS pseudo-class

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The :-moz-drag-over CSS pseudo-class is a Mozilla extension that matches an element when a dragover event is called on it.

Syntax

:-moz-drag-over {
  /* ... */
}

Examples

HTML

<div id="drop-target">
  <p>Drop target</p>
</div>

<div draggable="true">
  <p>Draggable</p>
</div>

JavaScript

Most elements are not valid places to drop data, so in order to allow a drop, you must prevent default behavior by canceling dragenter or dragover (or both) events. In this example, we only need to cancel the dragenter event, which is the first event fired when the browser evaluates if an element can be a drop target. For more information, see Drag operations: Specifying drop targets.

const target = document.getElementById("drop-target");
/* dragenter event fired on the drop target */
target.addEventListener("dragenter", (event) => {
  // prevent default to allow drop
  event.preventDefault();
});

CSS

body {
  font-family: "Arial";
}
div {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 2px dotted black;
  background-color: aquamarine;
  margin: 1rem;
}
p {
  padding: 1rem;
}

The following CSS changes the drop target color to red when the draggable element overlays the drop area.

#drop-target {
  background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
  background-color: red;
}

Result

Specifications

Not part of any standard.