Javascript 事件侦听器和转换

我在一个我想创建的个人网站上工作。我一直在努力把款式弄对。我有一点Javascript和CSS的混合

我想做的是有一个图像幻灯片，一旦点击一个按钮，它就会覆盖整个页面

在我的HTML页面中，我创建了以下按钮：

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

通常，我通过更改css类root类中名为：root的变量来控制图像的宽度。有没有办法用javascript更改悬停宽度变量

: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;
}

---

还是我忽略了另一种方式？

您可能希望尝试找出您试图编写代码的语言的名称。Java与Javascript非常不同，这就是我正在尝试实现的Javascript。听起来我可能需要使用Angular或ReACt来实现这一点？

我有一点Java与CSS混合

然后在我的Java文件中

使用Java更改悬停宽度变量？

已更新，抱歉混淆。请改为更改divs类。看见

: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;
}