mouseleave无法正常工作

2 回答

• 0

  还要考虑先加载图像，然后在加载后绑定事件 .

  另一个提示是使用jQuery悬停功能（工作方式相同，除了它可能更容易阅读）：

  $(".productImg").hover(
      function() {
          // do mouse enter things
      },
      function() {
          // do mouse leave things
      }
  );
  

  并把它放在onload事件中：

  img.onload = function() {
      $(".productImg").hover(..);
  };
  

  回复于 2024-05-08T23:58:16+08:00
• 0

  $(document).ready(function() {
      $('.productImg').bind('mouseenter', function(){
          if($('#zoom_product_image').length)
              $('#zoom_product_image').detach();
  
          var maxWidth=$(this).parents('form').width();
          var maxHeight=$(this).parents('form').height();
  
          var link=this.src.replace(/small/g, 'big');
          $(this).parents('form').append('<img id="zoom_product_image" style="display: none;" src="'+link+'">');
          var img=new Image();
          img.onload=function(){
                  $('#zoom_product_image').css({'position': 'absolute', 'border': '1px solid #78C7FF', 'top': '0px', 'left': '0px', 'z-index': '10000', 'opacity': '0.95', 'cursor': 'pointer', 'display': 'block'});
  
                  if($('#zoom_product_image').width()>maxWidth){
                      $('#zoom_product_image').css({'width': maxWidth, 'height': $('#zoom_product_image').height()*(maxWidth/$('#zoom_product_image').width())});
                  }
                  if($('#zoom_product_image').height()>maxHeight){
                      $('#zoom_product_image').css({'height': maxHeight, 'width': $('#zoom_product_image').width()*(maxHeight/$('#zoom_product_image').height())});
                  }
          }
          img.src=link;
  
          $(this).parents('form').bind('mouseleave', function(){
              $('#zoom_product_image').detach();
          });
  
          $('#zoom_product_image').bind('click', function(){
              window.location.href=$('#zoom_product_image').parent().find('.bigtitle').attr('href');
          });
      });
  });
  

  回复于 2024-05-08T23:58:16+08:00