:-moz-drag-over
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 cancelling 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();
},
false,
);
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.