Изменение цвета в панели навигации

#html #css

#HTML #css

Вопрос:

Я пытаюсь изменить цвет параметра «наведение» в навигационной панели скрипта.

В файле css «цвета» я вижу это:

 .navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #e1e1e1;
}
  

Изменение «фокуса» работает отлично, но если я попытаюсь изменить «наведение» таким образом, ничего:

 .navbar-inverse .navbar-nav > .active > a;
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #e1e1e1;
}

.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #e1e1e1;
}
  

Другие варианты:

 .navbar-inverse {
    background-color: #ffffff;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
}

.navbar-inverse .navbar-nav > li > a {
  color: #ababab;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #ffffff;
}

.navbar-inverse .navbar-toggle {
    border-color: transparent;
    background-color: rgba(255,255,255,0.05);
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: rgba(255,255,255,0.1);
}
  

Предложения?

Комментарии:

1. опечатка в строке 1 — должна быть запятая вместо точки с запятой

2. во второй версии измените точку с запятой на запятую .navbar-inverse .navbar-nav > .active > a; <—запятая. Когда это будет исправлено, это будет просто делать то же самое, что и первая версия, так что это бессмысленно.

3. Изменено запятой, но ничего не меняет.

4. Сценарий видео для взрослых ? 0.o

5. Вы хотите изменить цвет, но они все одинаковые #e1e1e1 , попробуйте #baddad

Ответ №1:

Существует порядок, в котором вы размещаете эти конкретные псевдоселекторы:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active
  5. a:focus *

* :focus не входит в эту серию AFAIK, но на всякий случай поставьте его последним.

 body {
  background-color: black;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:link,
.navbar-inverse .navbar-nav > .active > a:visited {
  background-color: #e1e1e1;
  color: blue;
  font: 400 40px/1.5 Verdana;
  text-decoration: none;
  padding:5px 10px;
}
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:active,
.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #b00b12;
  color: cyan;
}  
 <nav class='navbar-inverse'>
 <nav class='navbar-nav'>
  <div class='active'>
    <a href='#/https://pron.069'>Adult Videos</a>
  </div>
 </nav>
</nav>  

Комментарии:

1. Добавление a:active работает, но … только на текущей странице. Я нахожусь на странице видео, а на панели навигации «наведение» работает, но не на других «кнопках». Может быть, потому, что они «неактивны»?

2. Скорее всего, любое изменение классов задействованных элементов и все изменится. .active является очевидным подозреваемым. Другие «кнопки», скорее всего, не являются частью этого набора правил. Если вам нужны все ваши ссылки (/ кнопки)? чтобы вести себя так же, используйте только a и удалите селекторы, которые предшествуют a

3. Я попытался удалить селекторы, но ничего не изменил. Это странно, потому что «фокус» хорошо работает на всех кнопках.

4. focus обычно это событие, связанное с формой, когда ваша последняя мышь или щелчок находятся на фокусируемом элементе, он обычно выделяется до тех пор, пока пользователь не расфокусирует (размытие), щелкнув в другом месте. Наведение также должно работать, а active работает только тогда, когда вы держите палец на кнопке мыши.

5. Возможно, в этом случае наведение связано с другими параметрами. Я добавил другие параметры панели навигации в css-файл «цвета».

Ответ №2:

Просто измените; вместо этого используйте ,

 .navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #e1e1e1;
}

.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #e1e1e1;
}
  

Комментарии:

1. Пробовал, но ничего. Он работает с фокусом, но «наведение курсора» не меняется.