How to change the background of the block where files are dragged to be uploaded on hover?

Question

css

Good afternoon!

The site is designed to upload files by dragging them into the block. bnews2.volodin-web.ru/reporter-popup.html
I need to make it change the background color when the mouse with the file is hovered anywhere in its area. :hover does not work if you drag a file there with the mouse.

Tell me, please, how to solve this problem?

Thanks in advance!

Answer 1

See how it's done here: jqueryui.com/droppable/#visual-feedback

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
                .html( "Dropped!" );
    }
});
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
    accept: "#draggable2",
    activeClass: "ui-state-hover",
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
                .html( "Dropped!" );
    }
});