Проблема с настройкой кнопок начальной загрузки

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

У меня возникли проблемы с кнопками начальной загрузки, и я надеюсь, что вы сможете мне помочь.

Я пробовал это в JS fiddle, и у меня это работает так, как я хочу, чтобы это было здесь. Поэтому, когда я навожу курсор на кнопку, я получаю темно-синий, а когда я нажимаю на нее, я получаю такой же темно-синий.

Однако, когда я просматриваю страницу в Firefox или Chrome и нажимаю кнопку, появляется цвет по умолчанию (серый) для класса ‘btn-default’. Я полный новичок, и за короткое время, проведенное в CSS и Bootstrap, активный псевдокласс предназначен для нажатия кнопки. Я попытался переопределить его, используя это:

 .btn-default.active, .btn-default:active{
    background-color: #1e3c89;
    border-color: #1e3c89;
}

Есть идеи, что я делаю не так?

РЕДАКТИРОВАТЬ: Спасибо за ваши ответы. Я не уверен, что правильно объясняю, чего я пытаюсь достичь. Итак, я разместил здесь ссылку, которая правильно иллюстрирует мою проблему (извиняюсь за качество). Текущее состояние кнопки светло-синее, при наведении курсора оно темно-синее. Вы заметили, что кнопка затем становится серой, то есть когда я нажимаю на кнопку. Когда я нажимаю кнопку, я хочу, чтобы она была такой же темно-синей.

1. Итак, чего вы на самом деле хотите?

2. : активен , когда его нажимают в данный момент, означает, что он освобождается вместе с щелчком мыши. (Когда вы отпускаете мышь) Нам нужно больше кода, чтобы найти точную проблему.

3. Что вы хотите сделать? Изменить цвет «активного» состояния? Если это так, вы уже все сделали правильно, но вам нужно изменить цвета, чтобы они отличались от состояния наведения и фокусировки.

4. @HusainAhmmed Я обновил свой пост видео, показывающим, в чем моя проблема и что я хочу сделать.

5. Хорошо, я видел ваше обновление. Но без вашего кода нам сложно выяснить проблему, с которой вы столкнулись. Поэтому, пожалуйста, вставьте свой код в свой вопрос, чтобы мы могли попытаться выяснить, в чем проблема?

Ответ №1:

У вас одинаковые цвета для наведения и активного состояния.

Попробуйте изменить цвета для активного состояния

 .btn-default.active, .btn-default:active {
   background-color: #5e4c89;
   border-color: #5e4c89;
   color: #fff;
   box-shadow: inset 0 3px 5px rgba(0,0,0,0.5);
}

https://jsfiddle.net/rooo55nw/