jquery - マウス入力でJqueryスパンが消える

Question

mouseenter の後に表示されるスパンがそこにとどまり、ユーザーがスパンにカーソルを合わせてリンクをクリックできるようにしたい......

マウスが画像を離れたため、スパンが消えていることはわかっています...どうすればスパンをそこにとどめ、ユーザーがその上にホバーできるようにできますか?

htmlはこちら

 <div id="tour">
   <h2>Paris, France Tour</h2>
   <p>$2,499 for 7 Nights</p>
   <button>See photos from our last tour</button>
   <ul class="photos">
     <li>
       <img class="item1" alt="Paris1" src="http://www.cmclove.org/img/left01.jpg">
        <span class="cap1"><div class="span_padding">Arc de Triomphe</div></span>
      </li>
      <li>
        <img class="item1" alt="Paris2" src="http://www.cmclove.org/img/left01.jpg">
        <span class="cap1"><div class="span_padding">The Eiffel Tower</div></span>
      </li>
      <li>
        <img class="item1" alt="Paris3" src="http://www.cmclove.org/img/left01.jpg">
        <span class="cap1"><div class="span_padding">Notre Dame de Paris</div></span>
      </li>
      <li>
        <img class="item1" alt="Paris3" src="http://www.cmclove.org/img/left01.jpg">
       <span class="cap1"><div class="span_padding">Notre Dame de Paris</div></span>
      </li>
    </ul>
  </div>

jsはこちら

      $('#tour').on('click', 'button', function(e){
      $('.photos').slideToggle();
      });

       function slideDown(e) {
       var span = $(this).parents('li').find('span');
       span.fadeToggle();
          }

       $('.photos').on('mouseenter', 'img', slideDown) 
       $('.photos').on('mouseleave', 'img', slideDown)

フィドルはこちら

http://jsfiddle.net/N6ZW3/