Objective
In this project, the main goal is to create two interactive elements: element A and element B. The desired outcome is for element B to only appear when element A is hovered over, while also smoothly following the cursor without any jittering.
Individually, I have successfully implemented the hovering/showing functionality and the smooth cursor-following behavior. However, I am facing challenges in integrating these two features seamlessly without introducing any jitter caused by offsetX/offsetY properties.
Implementation
UPDATE:
The code snippet provided below may not execute correctly; it is recommended to copy the code into a file for accurate testing.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="content">
<div id="A"></div>
<div id="B"></div>
</div>
</body>
<script src="script.js"></script>
</html>
CSS Styling:
* {
margin: 10px;
}
#content {
position: absolute;
border: 5px solid green;
}
#A {
border: 5px solid red;
width: 500px;
height: 500px;
}
#B {
display: none;
position: absolute;
border: 5px solid blue;
width: 100px;
height: 100px;
}
#A:hover~#B {
display: block;
}
JavaScript Implementation:
let b = document.getElementById('B');
const onMouseMove = (e) =>{
b.style.left = e.offsetX + 'px';
b.style.top = e.offsetY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
Description
This setup involves placing both elements A and B inside the "content" division. Moving either of them out of this setting will disrupt the hover effect. Testing the current configuration reveals that element B flickers frequently and incorrectly teleports to the top left corner. This issue stems from using offsetX/offsetY instead of pageX/pageY, leading to positioning inconsistencies with respect to zoom levels. Furthermore, maintaining both A and B within the same parent container ('content') is crucial for the hover/show CSS interaction, necessitating element B's placement outside the body tags to align with pageX/pageY behavior.
Query
Are there alternative techniques available to accomplish one or both of my objectives effectively? Is there an unconventional CSS solution for toggling visibility between elements situated in different divisions, or perhaps a JavaScript workaround? Ideally, I wish to avoid jQuery dependencies. My attempts at implementing mouseover and mouseout events were unsuccessful due to erratic triggering causing visual flickering. Additionally, is there a method to calculate the pixel distance between the edge of 'content' and the window's top/left, enabling precise relative positioning adjustments based on pageX/pageY coordinates?
If any unnecessary practices are evident in the given example, or if the observed behavior deviates from the expected output, kindly provide feedback. It is plausible that due to brevity limitations, essential parts of the original code might be omitted here to illustrate the core challenge accurately.
UPDATE
To enhance clarity and accuracy, the actual code utilized in my ongoing project has been shared via this link for reference and review.
UPDATE 2
Clarification: In my specific code (on codepen), element A corresponds to mainitem, while element B corresponds to tooltip-border, as noted by @DavidsaysreinstateMonica in the comments section.