title: jQuery ui droppable hoverClass activeClass
body: <p>I have this code </p>
  
  <pre><code>$( "div.column_14_int" ).droppable({
    accept: "div.element-container",
    activeClass: "drop-cl",    
    hoverClass: "drag-over",
    tolerance: 'pointer',
    greedy: true,
  
      drop: function( event, ui ) {
     $(ui.draggable).appendTo( this );
      },
  
  }); 
  </code></pre>
  
  <p>That works fine, but when start dragging an item, the activeClass is added to droppable and work.</p>
  
  <p>When draggable item is over droppable hoverClass is added to droppable, but it doesn't work: the droppable element still has the activeClass color.</p>
  
  <p>draggable item </p>
  
  <pre><code>&lt;div class='element-container delete_el w4-4'&gt;\
  &lt;div class='element-handler'&gt;\
  &lt;a href='#edit-element' class='edit revs-edit-element'&gt;Edit&lt;/a&gt;\
  &lt;a href='#del' class='del-element'&gt;X&lt;/a&gt;\
  &lt;/div&gt;&lt;div class='element'&gt;\
  &lt;span class='element-icon'&gt;\
  &lt;img src='http://placehold.it/36x36&amp;text=icon'&gt;&lt;/span&gt;\
  &lt;span class='element-name'&gt;Element name&lt;/span&gt;&lt;/div&gt;\
  &lt;textarea rows='4' cols='20' class='text-shortcode'&gt;[revs_flexslider page='home']    
  &lt;/textarea&gt;\
  &lt;/div&gt;"
  </code></pre>
  
  <p>droppable</p>
  
  <pre><code> &lt;div class='column_14 column_del column '&gt;&lt;div class='top-bar'&gt;&lt;div class='left
   controllers'&gt;&lt;a href='#decr' class='decr'&gt;-&lt;/a&gt;&lt;span class='sz'&gt;1/4&lt;/span&gt;&lt;a    
   href='#incr' class='decr'&gt;+&lt;/a&gt;&lt;/div&gt;&lt;div class='del-column'&gt;&lt;input type='button'  
   class='del' value='X'&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class='pb-element-container column_14_int 
   column_control connectedSortable'&gt;&lt;/div&gt;&lt;textarea rows='4' cols='20' class='text-
   shortcode text-shortcode-col'&gt;[rev-column whidt='14']&lt;/textarea&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But i dont know Why u need thi for answer</p>