我正在使用这个 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");
});
但是我没有成功。同样的问题。我做错了什么?
最佳答案
您不需要为此删除 src
属性。只需使用 display: none
隐藏元素即可。
将 src
设置为空字符串实际上会取消加载过程,浏览器可能会在其缓存中保持“故障”状态。
关于javascript - jquery 显示/隐藏带有鼠标悬停的大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53364271/