EventListener和Transition

Question

我正在创建一个我想创建的个人网站。我坚持试图让风格正确。我有一些Javascript与CSS混合。

我想要做的是在点击按钮后将图像滑过以接管整个页面。

What the website looks like

在我的HTML页面中，我创建了这个按钮：

 <div class="split right">
   <h1>Build a setup</h1>
   <a href="#" class="button" id='buildNow'>Build Now</a>
 </div>

然后在我的java文件中我有这些：

right.addEventListener("mouseenter", () => {
  container.classList.add("hover-right");
});

right.addEventListener("mouseleave", () => {
  container.classList.remove("hover-right");
});

buildNow.addEventListener("click", () =>{

});

通常我通过更改名为root的css类根类中的变量来控制图像的宽度。有没有办法用javascript更改hover-width变量？

:root {
  --container-bg-color: #333;
  --left-bg-color: rgba(132, 132, 132, 0.7);
  --left-button-hover-color: rgba(36, 73, 161,.4);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --right-button-hover-color: rgba(36, 73, 161, .4);
  --hover-width: 75%; //This is where I think I should change this to 100%, and other to 25
  --other-width: 25%;
  --speed: 1000ms;
}

或者我还有另一种俯视方式吗？