EventListener and Transition

Question

I am working on a personal website that I want to create. I am stuck on trying to get the style right. I have a little bit of Javascript intermixed with CSS.

What I want to do is have an image slide over to take over the whole page once a button is clicked.

What the website looks like

In my HTML page I have this button created:

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

Then in my java file I have these:

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

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

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

});

Usually I controlled the width of a image by changing a variable in the css class root class called :root. Is there a way to change the hover-width variable with 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;
}

Or is there another way I am overlooking?

You may wish to try to figure out the name of the language you're trying to write code in. Java is very different from Javascript. — CertainPerformance, Jun 18 '18 at 00:25
This would be Javascript I am trying to implement. Sounds like I may need to use Angular or ReACt to achieve this? — Cooper Hurt, Jun 18 '18 at 00:34
`I have a little bit of Java intermixed with CSS` `Then in my java file` `change the hover-width variable with java?` — CertainPerformance, Jun 18 '18 at 00:35
Change the divs class instead. See https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript&ved=2ahUKEwiSvrLWgdzbAhWVIDQIHU12D-YQjjgwAHoECAAQAQ&usg=AOvVaw1OPjSKAyDA9lA20Gqq7gyZ — Jason Livesay, Jun 18 '18 at 01:02

EventListener and Transition

0 Answers0