File-drop hover as gmail


I have the following html:

<div class="drop_window">
    <input class="drop_target" type="file" class="crop locale" size="800" />
    <div class="file_name">{{ video.original_file_name }}</div>

To have the drop_window change color on hover, I can do:

.drop_window:hover {
    background: #F5FFF5;

However, if I try and drag a file into that drop_window, it does not change color. How would I make it do so, similar to Gmail's file-drop functionality?

Here is an example of what I currently have:

You can use just addEventListner on dragenter, And then you can adjust the style. Make sure to change the color back on dragexit so for example:

So if you want it just on the div try:

var drop = document.getElementById("layout");
drop.addEventListener("dragenter", change, false);

function change() { = '#EFF2AA';

function change_back() { = 'transparent';