On my webpage, I have implemented a mousemove-mask feature that was inspired by an existing codepen. However, there is one significant issue that I can't seem to resolve on my own. Despite my attempts to fix it, I believe someone with more expertise could easily solve this problem.
The main issue lies in the fact that the current code assumes an "empty" webpage layout without any other content. Since I want to apply this functionality to only a specific section of my site, I need the JavaScript to target that particular element. As it stands now, the mask covers the entire page and displays black space when the cursor moves outside the designated HTML area with headings or background images. To address this, I attempted to assign a CSS ID ("html-container") to the HTML container so that the JavaScript is triggered only when the mouse hovers over this element:
// jQuery
$("#html-container").hover(
function(event) {
// Execute code when mouse enters the element
},
function (event) {
// Execute code when mouse leaves the element
}
);While I believe this approach is correct, I am uncertain about how to modify the code effectively for it to work as intended. The existing code snippet is provided above. I would greatly appreciate any assistance in resolving this issue.