如何在悬停Div上更改多个图像并动态显示图像

 

 

答：HTML：

<div>

       <img class="parent " src="image.jpg"" data-pos = '0' />

       <div>

         <img class="img" style="display:none" src="image1.jpg"" />

         <img class="img" style="display:none" src="image2.jpg"" />

         <img class="img" style="display:none" src="image3.jpg"" />

         <img class="img" style="display:none" src="image4.jpg"" />

         <img class="img" style="display:none" src="image5.jpg"" />

      </div>

<div>

 

jQuery的：

 

$(document).ready(function(){

  var pos = 0;

  $('.parent').bind('mouseover',function(){

    pos = $(this).data('pos');

    $(this).next('div').find('.img').eq(pos%5).show();

    $(this).hide();

    pos++;

    $(this).data('pos',pos);

  });

  $('.img').bind('mouseout',function(){

    $(this).hide();

    $('.parent').show();

 

  });

});