Quiero hacer un cursor personalizado con elementos antes y después. ¿Cómo puedo seleccionar y cambiar los valores antes y después de los elementos con JavaScript?
.a-Cursor::before { content: ''; display: block; width: 18px; height: 18px; border: 2px solid #353B48; border-radius: 50%; position: absolute; top: attr(top-Pos); left: attr(left-Pos); } </style> </head> <body> <div class='page-Body'> <div class='a-Cursor'> </div> </div> <script> const aCursor = document.querySelector('.a-Cursor'); document.addEventListener('mousemove', function(e) { aCursor.setAttribute('top-Pos', (e.pageY - 9) + 'px'); aCursor.setAttribute('left-Pos', (e.pageX - 9) + 'px'); });
Encontré una respuesta. No sé si esto es bueno o malo.
Estaré aquí para mejores soluciones.
.a-Cursor::before { content: ''; display: block; width: 18px; height: 18px; border: 2px solid #353B48; border-radius: 50%; position: absolute; top: var(--top-Pos); left: var(--left-Pos); } </style> </head> <body> <div class='page-Body'> <div class='a-Cursor'> </div> </div> <script> const aCursor = document.querySelector('.a-Cursor'); document.addEventListener('mousemove', function(e) { aCursor.style.setProperty('--top-Pos', (e.pageY - 9) + 'px'); aCursor.style.setProperty('--left-Pos', (e.pageX - 9) + 'px'); });