I'm looking to make a button with an :after background following the mouse when hovering.
I'm struggling to make it move when mouse is moving.
<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`;
});
I doesn't have any error but properties are not updating.
Any ideas ? Thanks a lot !
You can use .style attribute to update the properties
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>You can't change a pseudo element's position that way, but what you can do is set its position depending on CSS variables.
This snippet sets two variables --x and --y to the position you want the pseudo element to be in and sets it to pick these up with top: var(--y) and left: var(--x).
It also compensates for the fact that the pseudo element is placed relative to the button so the button's position needs to be subtracted from the clientX/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>