Can't make a pseudo elements follow mouse movements-CodePudding

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 !

CodePudding user response：

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>

CodePudding user response：

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>