jQuery UI droppable not over

Question

Code:

    $("div.layout.lo-content > div.content").droppable(
    {
        over:function(e,ui)
        {
            alert("yes");
            $(this).css("background-color","#FFFFFF");
        },
        drop: function(e, ui)
        {
            $(ui.draggable).appendTo($(this));
            if($(this).hasClass("ui-sortable"))
            {
                $("div.content").sortable('refresh');
            }
        }
    });

As you can see, when an element is dragged on top of the above element, its background colour will change.

Is there a way to make the background colour transparent if the element is not over the droppable container?

Such as:

{
    notover: function(e,ui) { }
}

Answer 1

Try

css

div.layout.lo-content > div.content {
  background-color:transparent;
}

js

  $("div.layout.lo-content > div.content").droppable(
    {
        over:function(e,ui)
        {
            alert("yes");
            $(this).css("background-color","#FFFFFF");
        },
        drop: function(e, ui)
        {
            $(ui.draggable).appendTo($(this));
            if($(this).hasClass("ui-sortable"))
            {
                $("div.content").sortable('refresh');
            }
        },
        out:function() {
            $(this).css("background-color","transparent");   
        }

    });