CSS div hover to change color by another dragged div

Question

I use Jquery Sortable plugin to implement drag/drop. When dragging a div panel from source and drop to destination box, I want destination drop container to change border and background.

If mouse hovers destination container with following css, destination container div changes border width and background color. It works! But, if mouse drags another div and hovers destination container, it does not work.

How to solve it?

  .destination-container {
    outline: 2px dashed #afcedc;
  }

  .destination-container:hover {
    outline: 8px dashed #afcedc;
    background-color: lightgray !important;
  }

Answer 1

from the specs jqueryui: jqueryui

create a new class like:

.destination-container-hover {
  outline: 8px dashed #afcedc;
  background-color: lightgray !important;
}

and add the class "destination-container-hover" into the ui-droppable-hover part:

$( "#droppable" ).droppable({
  classes: {
    "ui-droppable-hover": "destination-container-hover"
  },
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
});

since you didn`t provided more code, I'll give you an example from the jQueryUI website.