Невозможно добавить эффект наведения к тегу, когда цвета тега a уже управляются с помощью JavaScript?

#javascript #html #css

Вопрос:

У меня есть веб-сайт (https://lunarcreator.uk ). Я создал для него панель навигации, которая изменяется за пределы определенного смещения y (> amp; < 100), чтобы она была видна на фоне и содержимом во время прокрутки.

Для этого у меня есть следующий javascript:

 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)

константа link_n ссылается на конкретный тег a в панели навигации. Однако, добавив это изменение при прокрутке, я потерял функциональность тегов a, имеющих эффект наведения при прокрутке. Я попытался указать наведение курсора мыши в css с помощью :hover, но это не сработало. Как я мог это исправить?

Спасибо, что уделили мне время. (у меня очень мало знаний в javascript, поэтому я думаю, что это было лучшее место для ответов)

1. почему бы просто не переключить класс?

2. что, если window.pageYOffset равен ровно 100?

3. Извините, это операция на другой учетной записи — ничего не происходит, когда оно ровно 100 (например, у меня никогда не возникало никаких проблем)

Ответ №1:

Было бы намного лучше просто добавить class в ваш заголовок после прокрутки.

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

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

window.addEventListener('scroll', getOffset)

И чем редактировать стили на основе класса заголовка.

 .header a {
  color: #FFF;
}

.header.fixed {
  background: #fff;
}

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

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

Вот скрипка: https://jsfiddle.net/oLtvjwhe /

Редактировать: Избегайте использования !важно, что предложил Аллан.

Даже в w3schools это написано внизу «Совет: полезно знать о !важное правило, вы можете увидеть его в каком-нибудь исходном коде CSS. Однако не используйте его, если вам это абсолютно необходимо.» И в этом случае вам не нужно !важно.

Ответ №2:

Используйте CSS !важное правило https://www.w3schools.com/css/css_important.asp

Нравится:

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

Надеюсь, это сработает.

Ответ №3:

рассмотрите возможность таргетинга на родительский класс #pronav . Затем просто добавьте fade-to-white к нему класс:

 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)
}

затем настройте дочерние элементы с помощью 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 */