Question

Please see my source code at: http://jsfiddle.net/rAmSG/9/

The blue item should be dropped at an of the other 3 divs. This already works correctly. But I want to have a effect when the blue item is over one of the other divs (and the mouse is not released yet). The corresponing div should be colored grey (but only the smallest div, like the drop behavior).

Does anyone have a suggestion how to do this?
Also I’m not able to get the ‘hoverClass’ settings working, any solutions for this too?

Thanks in advance!

Answer 1

You have problems with hoverClass because you’re defining a background color for the droppable elements using an id selector, and that rule takes precedence even when you apply the dark class to the elements.

You can increase the .dark rule’s priority with !important:

.dark {
    background-color: #333333 !important;
}

Then you can use hoverClass as expected:

$("#dropDiv1, #dropDiv2, #dropDiv3").droppable({
    greedy: true,
    drop: function() {
        $(this).css("background-color", "black");    
    },
    tolerance: "pointer",
    hoverClass: "dark"
});

You will find an updated fiddle here.