Detect hover on iframe from different domain

Detect hover on iframe from different domain

I have an iframe loaded into a parent page. The page and the iframe are
hosted on different domains. My iframe skeleton looks something like this
: http://cl.ly/image/44090J0H2S3Y
I am trying to implement drag and drop of files into the iframe from
outside. Due to security reasons, browsers wont forward drag/drop events
to the iframe loaded from a different domain. Currently, I am working
around that by placing a transparent div over the entire iframe and
catching the javascript "drop" event onto the transparent div and then use
iframe.postMessage to send a message to the iframe. On the iframe side, I
have some javascript listening for the message and takes appropriate
action of uploading it to my server.
This all is working fine. What I want to implement is the following :
User starts dragging an image from the host page
As soon as s/he arrives in the "blue" area, the corresponding blue item
should highlight
When s/he lets go, the file should be uploaded
I can place a separate transparent div on each of the blue items but the
problem is there could be any number of blue items with the scrollbar etc.
I am not sure how I can achieve this. Thanks for your help!