Unable to add hover effect to a tag when colours of the a tag are already managed using javascript?-CodePudding

I have a website (https://lunarcreator.uk). I have made a navbar for it which changes beyond a certain y offset (> & < 100) so that it is clear on the background and content during scrolling.

I have the following javascript to do this:

const logo = document.querySelector('#pronav')
const about = document.querySelector('#about')
const log_text = document.querySelector('#log_text')

const link1 = document.querySelector('#link1')
const link2 = document.querySelector('#link2')
const link3 = document.querySelector('#link3')

const getOffset = () => {
  if(window.pageYOffset > 100){
     logo.style.backgroundColor = 'white';
     logo.style.transition = 'background .2s ease-out';
     log_text.style.color = 'black';
     link1.style.color = 'black';
     link2.style.color = 'black';
     link3.style.color = 'black';
  }
  if(window.pageYOffset < 100){
     logo.style.backgroundColor = 'rgba(0,0,0,0)';
     logo.style.transition = 'background .2s ease-out';
     log_text.style.color = 'white';
     link1.style.color = 'white';
     link2.style.color = 'white';
     link3.style.color = 'white';
  }
}

window.addEventListener('scroll', getOffset)

the const link_n refers to the specific a tag in the navbar. However, in adding this change on scroll, i have lost the functionality of the a tags having a hover effect on scroll. I have tried specifying the hover in css using :hover but this does not work. How could i go about fixing that?

Thanks for your time. (i have extremely little javascript knowledge so i think this was the best place to come for answers)

CodePudding user response：

Use the CSS The !important Rule https://www.w3schools.com/css/css_important.asp

Like:

.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #AEC6CF !important;
}

Hope it works.

CodePudding user response：

It would be much better just to add class to your header after scroll.

let header = document.querySelector('.header');

const getOffset = () => {
  if(window.pageYOffset > 100){
    header.classList.add('fixed');
  } 
  else {
    header.classList.remove('fixed');
  }
}

window.addEventListener('scroll', getOffset)

And than edit styles based on header class.

.header a {
  color: #FFF;
}

.header.fixed {
  background: #fff;
}

.header.fixed a {
  color: #000;
}

.header.fixed a:hover {
  color: blue;
}

Here is the fiddle: https://jsfiddle.net/oLtvjwhe/

Edit: Avoid using !important which Allan suggested.

Even w3schools say it at the bottom "Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to." And in this case you don't need !important.

CodePudding user response：

consider targeting the parent class #pronav. Then, simply add a fade-to-white class to it:

const FADE_TO_WHITE = 'fade-to-white'
const pronav = document.querySelector('#pronav')

const getOffset = () => {
  window.pageYOffset > 100 
    ? pronav.classList.add(FADE_TO_WHITE)
    : pronav.classList.remove(FADE_TO_WHITE)
}

then target the children with css:

#pronav.fade-to-white a {
 color: black;
}

#pronav a {
 color: white;
}

#pronav.fade-to-white a:hover {
 color: blue; /* change this */
}

/* continue like this */