I'm currently utilizing this jQuery script to toggle the visibility of an image with a fixed position:
$(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");
});
The code functions perfectly when the image is preloaded. However, if I hover over a large picture that hasn't fully loaded, the image doesn't appear. Even waiting for a longer period in the hover area doesn't make the image show up. I have to move out of the area and then reenter it to display the image.
To address this issue, I attempted using the following code snippet:
$(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");
});
Unfortunately, this modification didn't resolve the issue. The problem persists. Please assist me in identifying what I might be doing incorrectly?