Estoy buscando hacer un botón con un fondo: después de seguir el mouse cuando se desplaza.
Estoy luchando para que se mueva cuando el mouse se está moviendo.
<div class="main"> <div class="button"> Voir toute la collection </div> </div> .main { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; } .button { padding:32px; background-color:green; color:white; position:relative; &:after { content:''; display: block; height:100%; width:100%; position:absolute; left:10px; top:10px; background-color:yellow; } } const btn = document.querySelector('.button'); const btnAfterStyle = (window.getComputedStyle(btn, ':after')); console.log(btnAfterStyle.getPropertyValue('top')) btn.addEventListener("mousemove", function( e ) { console.log(e.clientX); btnAfterStyle.getPropertyValue('top') == `${e.clientY-20}px`; btnAfterStyle.getPropertyValue('left') == `${e.clientX-75}px`; });No tengo ningún error, pero las propiedades no se actualizan.
Algunas ideas ? Muchas gracias !
Puede usar el atributo .style para actualizar las propiedades
const btn = document.querySelector('.button'); const btnAfterStyle = (window.getComputedStyle(btn, ':after')); btn.addEventListener("mousemove", function( e ) { // btnAfterStyle.getPropertyValue('top') = `${e.clientY-20}px`; btn.style['top'] = `${e.clientY-0.5}px`; btn.style['left'] = `${e.clientY-0.5}px`; // btnAfterStyle.getPropertyValue('left') = `${e.clientX-75}px`; }); .button { padding:32px; width : 200px; background-color:green; color:white; position:relative; } <div class="main"> <div class="button"> Voir toute la collection </div> </div>No puede cambiar la posición de un pseudo elemento de esa manera, pero lo que puede hacer es establecer su posición según las variables CSS.
Este fragmento establece dos variables --x y --y en la posición en la que desea que esté el pseudoelemento y lo configura para que los recoja con top: var(--y) y left: var(--x).
También compensa el hecho de que el pseudo elemento se coloca en relación con el botón, por lo que la posición del botón debe restarse del cliente X/Y.
const btn = document.querySelector('.button'); const rect = btn.getBoundingClientRect(); const btnY = rect.top; const btnX = rect.left; btn.addEventListener("mousemove", function(e) { btn.style.setProperty('--y', `${e.clientY - btnY-20}px`); btn.style.setProperty('--x', `${e.clientX - btnX -75}px`); }); .main { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .button { padding: 32px; background-color: green; color: white; position: relative; } .button::after { content: ''; display: block; height: 100%; width: 100%; position: absolute; left: var(--x); top: var(--y); background-color: yellow; } } <div class="main"> <div class="button"> Voir toute la collection </div> </div>