jQuery UI dropover not always fired

jQuery UI dropover not always fired

I have a page with two DIVs, both of which are droppable. One of them (#droppable2) is initially hidden and is only shown when I hover the draggable item over the first DIV #droppable (with the dropover event). Example see here: http://codepen.io/anon/pen/AdLJr

  1.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  2.     <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  3.     <div id="droppable">Drop here 1</div>
  4.     <div id="droppable2" style="top: 300px; display: none;">Drop here 2</div>
  5.     <div id="draggable">Drag me</div>
  6.     <div id="log"></div>

JS:

  1.     $( "#draggable" ).draggable();
  2.     $( "#droppable,#droppable2" ).droppable({
  3.     drop: function() {
  4.         $('#log').html($('#log').html() + '<br>DROP');
  5.     },
  6.     over: function() {
  7.         $('#log').html($('#log').html() + '<br>over');
  8.         $('#droppable2').show();
  9.     }
  10.     });

However, when I now hover the draggable item over the second DIV, its dropover event is not fired like it should. Only when drop the draggable item and then pick it up again does it seem to work. The drop event already works on the first try though.

Any ideas what's causing this? I assume this might be a bug?