0

我希望 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/

4

1 回答 1

1

像这样 ？

http://jsfiddle.net/N6ZW3/4/

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

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

$('.photos li').mouseenter(slideDown) 
$('.photos li').mouseleave(slideDown)
于 2013-02-22T22:25:11.067 回答