JQuery UI: Drag-and-drop disables mouseover events?

I'm trying to have both mouseover events and drag-and-drop using JQuery and JQuery UI.

I currently have a working prototype here: http://dan.taeyounglee.com/othersites/m-p/ch18.php.

As you can see, if you move your mouse over the images, through a hover event that's bound to the artworks on the left, a separate corresponding div is hidden/shown. This works fine. But once you drag-and-drop one of the artworks onto the dotted-line areas, the hover no longer works.

Here's the hover code:

$(".artwork").hover(function () {        var hoverid = $(this).attr('id');      var hovernum = hoverid.split("img")[1];      $('.explanation').hide();      $("#explanation"+ hovernum).show();  },  function() {      $('.explanation').hide();  });  

It seems that something in JQuery UI is disabling the hover effect? I'm not sure how to fix this, and I've tried using mouseover/mousestart; it's the same.

Any ideas? Thanks!