title: jQuery.hover causing blinking effect
body: <p>I have two images, one of which is very small and is superimposed over the other.  When I hover over the larger image, the second image should appear on top of it.  This works great.  Unfortunately, when I move my mouse over the smaller image (which, remember, is on top of the larger image), the screen blinks wildly.  The system thinks I am leaving the larger image when I am actually not.  Let me post some code.</p>
  
  <pre><code>&lt;li id="li-{{ photo.id }}"&gt;
      &lt;div class="photo-container"&gt;
          &lt;img class="photo" src="{{ photo.thumbnailFile.url }}"/&gt;
          &lt;img class="delete-button" src="{{ STATIC_URL }}delete_photo.jpg "/&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  
  function DisplayPhotoOptions() {
  $("#personal-photo-list .photo").hover(function(event) {
      $(this).fadeTo("fast", 0.5);
      $(this).next(".delete-button").css("visibility", "visible");
  }, function() {
      $(this).fadeTo("fast", 1.0);
      $(this).next(".delete-button").css("visibility", "hidden");
  });
  
  (function() {
      $(document).ready(function() {
           DisplayPhotoOptions()
      });
      })();
  </code></pre>
  
  <p>Does anyone know how to resolve this problem?</p>