Соответствие фона кнопки фону списка

Question

Я хочу, чтобы цвет кнопки «Подключиться как» на панели навигации соответствовал остальному списку, но он всегда темнее

.dropdown{
     background-color:rgba(255,255,255,.4);
  }

ПОЛНЫЙ КОД ЗДЕСЬ

html css

0

Nor Elhouda Gribi 2 Май 2019 в 03:33

Answer 1

Поскольку кнопка 'Connect as' имеет объявленный класс 'dropbtn', она переопределит CSS 'color', который вы объявили в своем блоке CSS 'nav ul li a', из-за специфики CSS, поскольку класс имеет больший вес, чем элемент тег, попробуйте удалить свойство цвета CSS в классе .dropbtn и добавить его в '.dropbtn:hover', чтобы вызвать темный цвет текста только при наведении

.dropbtn:hover{
 color: black;
 background-color:#283fb8 
}

.dropbtn {
  background-color: transparent;
  padding: 16px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
 }

Некоторые заметки, по крайней мере, попробуйте разделить ваш CSS в своем собственном файле и просто добавить его по ссылке, что значительно упрощает отладку и позволяет увидеть проблему. Это также чище и способствует повторному использованию. Не знаю, смогу ли я ответить на ваши вопросы, но надеюсь, это поможет!

0

slideshowp2 2 Май 2019 в 03:17

Answer 2

Из того, что я понял и прочитав ваш код, я думаю, что нашел исправление, которое вы искали. На моем конце это была строка 160 на CodePen:

.dropbtn : парения { фонового цвета: #eee }

Причина, по которой цвета не совпадали, заключалась в том, что вы переопределили свой предыдущий код при наведении и, поскольку он был ниже в списке, он занял прецеденты. Чтобы исправить это, вы можете удалить код или изменить значение цвета на это:

.dropbtn: hover {background-color: # 000}

0

JuGGularVein 2 Май 2019 в 01:26

Answer 3

Попробуй это

.dropbtn{
      color: #fff;
}
.dropbtn:hover {
      background-color: #000;
}

2

Manish Solanki 2 Май 2019 в 09:07

Соответствие фона кнопки фону списка

3 ответа

Похожие вопросы

Новые вопросы

html