Jquery span dissapears on mouse enter
<p>I want the span that appears after mouseenter to stay there and the user has the ability to hover over the span and click on a link......</p>

<p>I know the span is dissapearing because of the mouseleaves the image......how can i make the span stay there and the user able to hover over it?</p>

<p>heres the html</p>

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

<p>heres the js</p>

<pre><code>      $('#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)
</code></pre>

<p>heres the fiddle</p>

<p><a href="http://jsfiddle.net/N6ZW3/" rel="nofollow">http://jsfiddle.net/N6ZW3/</a></p>
