I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div.
Now, I am working on the next phase of my project:
My goal is to make an AJAX call from the server to dynamically set the HTML content of a div based on the value or content of the image when the mouse enters the image area only once.
This is what I have tried so far:
var $divt = $('div#test')
$('img#sorc').on({
hover: function (e) {
alert('enter'); // This does not work
},
mousemove: function (e) {
$divt.css({
'display': 'block',
'top': e.pageY,
'left': e.pageX + 15
});
},
mouseleave: function () {
$divt.css('display', 'none');
}
});
I attempted to use hover to trigger the AJAX call only once when the user's mouse enters the image area. However, the desired result was not achieved as the alert box did not trigger. While I could preload the div with data from the server, I prefer to keep my code dynamic and reusable without hardcoding anything. My objective is to execute the AJAX call only once when the mouse enters the image area, rather than triggering it every time the mouse moves. How can I accomplish this?