2

I have a div that follows the mouse throughout the body. However it blocks elements from being clickable. Because it's at the top of the Dom. Is there a way I can change the css to make it visible but not clickable, or does the fact that it's at the body level of the code make this impossible?

Using Astro hence the strange html syntax.

<html lang="en">
    <body>
        <header>
            <TopBar />
        </header>
        <MenuOpenBtn />
        <slot />
        <script>
            import '../scripts/getScreenDimensions.js';
            import '../scripts/findMousePosition.js';
            import '../scripts/openMenu.js';
            import '../scripts/topBar.js';
            import'../scripts/findMenuPosition.js';
            import '../scripts/makeCursorHighlighter.js';
            import '../scripts/timer.js'
        </script>
    </body>
</html>

import currentMousePosition from "./findMousePosition";

let root = document.body;
const cursorHTML = document.createElement('div');
cursorHTML.classList.add('mouse')
root.appendChild(cursorHTML);

function moveCursor() {
  cursorHTML.style.top = `${currentMousePosition.Y}px`
  cursorHTML.style.left = `${currentMousePosition.X}px`
}

export default moveCursor;

The moveCursor function is triggered from timer.js like this...

import moveCursor from "./makeCursorHighlighter";

document.addEventListener("DOMContentLoaded", (e) =>
  timer(e, [moveCursor])
);

function timer(e, fnArr) {
  const int = setInterval(buffer, 50, [...fnArr]);
}

function buffer(fnArr) {
  for (let i = 0; i < fnArr.length; i++) {
    fnArr[i]();
  }
}

    .mouse {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: #ffff0055;
        z-index: 4;
        transform: translate(-35px, -35px);
    }
Lauro235
  • 121
  • 1
  • 8

0 Answers0