jQuery显示/隐藏带有鼠标悬停的大图像

时间:2018-11-18 18:40:34

标签: javascript jquery css image

我正在使用此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 个答案:

答案 0 :(得分:0)

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

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