jquery用鼠标悬停显示/隐藏大图像

Posted 2023-05-08

【中文标题】jquery用鼠标悬停显示/隐藏大图像

【英文标题】：jquery show/hide large image with mouseover

【发布时间】：2019-04-21 04:49:50

【问题描述】：

我正在使用这个 jquery 代码来隐藏/显示具有固定位置的图像：

$(document).on('mouseover',".multiverseid", function (e) 
  var mid = $(this).attr("id");
  $('#picture').attr('src', mid);
  $('.image-content').css("display", "flex");
);  
$(document).on('mouseout',".multiverseid", function (e) 
  $('#cardpicture').attr('src', "");
  $('.image-content').css("display", "none");
);

只要预加载图像，代码就可以正常工作。当我在未完全加载的大图片上进行鼠标悬停时，图像不会出现，甚至在鼠标悬停区域停留更长时间也不会显示图像。我必须移出该区域并重新进入鼠标悬停区域才能显示它。

所以我用这段代码试了一下：

$(document).on('mouseover',".multiverseid", function (e) 
  var mid = $(this).attr("id");
  $('#picture').attr('src', mid);
  $("#picture").load(function() 
    $('.image-content').css("display", "flex");
  );  
);
$(document).on('mouseout',".multiverseid", function (e) 
  $('#cardpicture').attr('src', "");
  $('.image-content').css("display", "none");
);

但我没有成功。同样的问题。我做错了什么？

【参考方案1】：

您不需要为此删除 src 属性。只需使用display: none 隐藏元素就足够了。

将src 设置为空字符串实际上会取消加载过程，并且浏览器可能会在其缓存中保持“故障”状态。