<div class="container">
<nav>
  <ul>
    <li>
      <a href="/">Link 1</a>
    </li>
    <li>
      <a href="/">Link 2</a>
    </li>
    <li>
      <a href="/">Link 3</a>
    </li>
  </ul>
  </nav>  
  <div class="button-container">
    <p>Toggle the link :hover color between green and orange</p>
      <button class="toggle-all">Toggle hover color</button>
    <p>Toggle the :hover underline style between wavy and double</p>
      <button class="toggle-underline">Toggle underline style</button>
  </div>
</div>
:root {
  --hover-color: green;
}

html, body {
  height: 100%;
}

.container {
  height: 60px;
  width: 100%;
  background: #80CBC4;
}

nav {
  display:flex;
  margin-bottom: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  max-width: 500px;
  width: 100%;
  padding: 0 2em;
}

a {
  --underline-style: wavy;
  text-decoration: none;
  font-weight: bold;
  color: aliceblue;
}

a:hover {
  color: var(--hover-color);
  text-decoration: underline;
  text-decoration-style: var(--underline-style); 
}

.button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
  text-align: center;
}
View Compiled 
const toggleAllColor = () => {
  const currentColor = getComputedStyle(document.documentElement)
    .getPropertyValue('--hover-color').trim();
  return currentColor === "green" ? "orange" : "green";
}

const toggleUnderlineStyle = () => {
  const currentStyle = getComputedStyle(document.querySelector('a')).getPropertyValue("--underline-style").trim();
  return currentStyle === "wavy" ? "double" : "wavy";
}

document.querySelector(".toggle-all").addEventListener("click", ()=> {
  document.documentElement.style.setProperty('--hover-color', toggleAllColor() );
});

document.querySelector(".toggle-underline").addEventListener("click", ()=> {
  const style = toggleUnderlineStyle();
  const links = document.querySelectorAll('a');
  links.forEach(link => {
         link.style.setProperty('--underline-style', style );
  })
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.