当div1超过div1时，可拖动的div背景为一种颜色，而当超过div2时则为另一种颜色

Question

我有一个可拖动的div，它最初位于蓝色标题上，因此具有蓝色文本和白色边框的白色背景，因此它很突出。 当它被拖动到具有白色背景的页面的其余部分时，我希望背景变为蓝色，文本白色和边框蓝色。

可拖动div使用absolute定位，因此实际上放在header元素之外，因此需要检测它所覆盖的页面区域。

可以使用CSS或Javascript / jQuery完成吗？

Answer 1

在JQuery中，我想你可以捕获mouseOver事件（https://api.jquery.com/mouseover/），当它被触发时，你会看到一些检查是否同时发生同时发生的拖动，如果发生这种情况，请更改颜色mouseOver事件发生的元素。

代码的重要部分：

HTML：

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

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

JQuery：在mouseOver上看看当时是否拖了另一个元素：

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

}）;

注意： 你必须通过id附加这个，至少我无法想象你如何将颜色变化应用于正确的元素。但是，颜色变化可以是一个功能，并且可以使用元素。