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/

Answer 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)

鼠标输入时Jquery跨度消失

1 个答案: