In all presented answers, I don’t see the most simple and obvious one (maybe I’m missing something in OP question). But, if someone stumble upon this later, and needs fast and simple solution in pure JS..
You do it by changing element className ondragover, and changing back to original class ondragleave
my_element.ondragover = function(ev) {
ev.preventDefault();
this.className="myElem_dragover";
}
my_element.ondragleave = function(ev) {
ev.preventDefault();
this.className="myElem_orig";
}
CSS
.myElem_orig { //this is your initial class for element
top: 30px;
left: 20px;
.....
background-color: blue;
}
.myElem_orig:hover { //this is hover state, just changing bg color
background-color: red;
}
.myElem_dragover { //new class, needs all attributes from original class
top: 30px;
left: 20px;
........
background-color: red; //behaves the same like hover does
}
edit:
forgot to mention, you need to bring back original class ondrop too, otherwise div will stay in dragover class