Draggable div background to be one colour when over div1 and then another when over div2

Question

I have a draggable div which is initially positioned over a blue header so has a white background with blue text and white border so it stands out. When it is dragged over the rest of the page which has a white background I would like the background to become blue, text white and border blue.

The draggable div is positioned using absolute so is actually placed outside of the header element so it would need to detect what area of the page it is over.

Can this be done using CSS or Javascript / jQuery?

Answer 1

In JQuery I imagine you could catch the mouseOver event ( https://api.jquery.com/mouseover/ ) and when it is triggered you would see with some check if there is a simulataneous drag happening meanwhile and if it is happening, change the colors of the element where the mouseOver event took place.

important parts of code:

HTML:

<div draggable="true" class="bar">Drag me!</div>     

<div id="foo"><p>To be dragged over.</div>      

JQuery: At mouseOver see if another element is dragged on the moment:

$( '#foo' ).mouseover(function() {
   if ($('.bar').is('.ui-draggable-dragging')) { return; // change color in here. }

});

NOTE: You have to have this attached by id, at least I couldn't imagine how you otherwise apply color change to correct element. Color change can be a function, though, and take in element.