Как изменить цвет: посетил в скрипте - PullRequest
Новая
       8

Как изменить цвет: посетил в скрипте

0 голосов
/ 03 октября 2019

Я хочу изменить текст навигационной панели на белый. Это работает для выпадающего меню, и я получил его на кнопку домой. Однако, поскольку это селектор «a», он видит его как ссылку и, таким образом, при нажатии (посещении) он получает цвет посещения. Поэтому я сделал .test a:visited {color:inherit;}', но это также не решает проблему. Если я добавлю .navbar .test {color:black;}, тогда он больше не станет белым на свитке. Кто-нибудь знает как это исправить? 

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("myTopnav").style.backgroundColor = "rgba(2,2,2,0.5)";
    $('.dropbtn').addClass('whitenavbar');
    $('.test').addClass('whitenavbar');

  } else {
    document.getElementById("myTopnav").style.backgroundColor = "red";
    $('.dropbtn').removeClass('whitenavbar');
    $('.test').removeClass('whitenavbar');
  }

}
.navbar {
  z-index: 1;
  background-color: red;
  top: 16px;
  width: 100%;
  position: fixed;
}

.navbar a {
  float: left;
  display: block;
  font-size: 16px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar .test {
  font-size: 16px;
  text-align: center;
  padding: 25px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 25px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
  text-decoration: none;
}

.whitenavbar {
  color: white;
}

.test a:visited {
  color: inherit;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: rgba(2, 2, 2, 0.2);
  text-decoration: none;
  color: #FFFFFF;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  text-decoration: none;
  color: #000000;
}

.dropdown:hover .dropdown-content {
  display: block;
  text-decoration: none;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="navbar" id="myTopnav">
  <a class="test" href="http://2019.igem.org/Team:TUDelft"><b>Home</b></a>
  <div class="dropdown">
    <button class="dropbtn" onclick="myFunction()">Dropdown
                    <i class="fa fa-caret-down"></i>
                </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

<!-- force scroll -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

1 Ответ

0 голосов
/ 04 октября 2019

Проблема здесь - это одно из объявлений стиля, имеющих одинаковую специфику, конкурирующих друг с другом.

Присвойте элементам <a> в .navbar определенный класс, например: 

<a class="navbarAnchor">

Затем вы можете явно ввести: 

.navbarAnchor {
  color: rgb(255, 255, 255);
}

в различных контекстах безнеобходимо сослаться на отношения между якорями и их родительскими / предковыми элементами.

При необходимости (а это вполне может быть и не так), вы можете сослаться на: 

  .navbarAnchor,
  .navbarAnchor:link,
  .navbarAnchor:visited,
  .navbarAnchor:hover,
  .navbarAnchor:active {
  color: rgb(255, 255, 255);
}

NB Это не для всех и не подходит для любой ситуации, но методология BEM (и связанные с ней методологии, такие как ABEM ) - очень хороший способ укротить проблемы специфичности в CSS.

После того, как я впервые столкнулся с BEM , я игнорировал это годами, потому что это совершенно противоречило тому, как я работал.

Я вернулся к нему позднов прошлом году и оценил гораздо больше, чем когда-либо прежде, как его преднамеренное внимание к селекторам на основе классов, а не на основе отношений, может значительно упростить обслуживание таблиц стилей, гарантируя, что почти каждый селектор в вашей таблице стилей имеетТот же уровень специфичности.

Вот хорошее место для старта:

https://css -tricks.com / abem-Полезная-адаптация-bem /

...