Как изменить цвет моего выпадающего текста (Bootstrap)

Question

Я новичок в bootstrap, и я использовал шаблон, чтобы помочь мне разработать панель навигации для веб-сайта mu, но я не понимаю, как стилизовать панель навигации, используя отдельный CSS do c. В частности, мой переключатель для раскрывающегося списка не изменит цвет. Я попытался установить как можно больше элементов в цвете: черный, но они никогда не влияли на текст переключателя выпадающего меню. Единственный способ изменить цвет был через тег в html (мне пришлось использовать стиль: «color: black;»), и все равно он не изменился бы на белый при наведении курсора, как другие элементы. Кто-нибудь знает, что я делаю не так. Я также хотел добавить анимацию onclick, если кто-то может помочь мне в этом. Это шаблон, который я использовал

<nav class="navbar navbar-expand-lg navbar-custom">
  <a class="navbar-brand" href="#"> <span> Artemis Server Hosting </span> </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
   <div class="collapse navbar-collapse" id="homepageNav">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
         <a class="nav-link" href="#">Home
           <span class="sr-only">(current)</span>
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="features.html">Features
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="pricing.html">Pricing
         </a>
       </li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">idk</a>
         <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
           <a class="dropdown-item" href="#">yet</a>
         </div>
       </li>
     </ul>
     <img src="https://cdn4.iconfinder.com/data/icons/shopping-21/64/shopping-01-512.png" style="align:center;" height="3%" width="3%" href="cart.html">
   </div>
</nav>

   .navbar-brand {
   color: white;
  }

  .navbar-brand:hover {
  color: black;

 }

 .nav-link {
 color: black;
 }

 .nav-link:hover {
 background-color: black;
 color: white;
 border-radius: 8px;
 }

Answer 1

Об анимации: пожалуйста, укажите чуть больше c какую анимацию вы хотите, например, изменить цвет фона целиком, показать или скрыть что-либо или что-то еще, но в целом, если вы используете jQuery, вы можете сделайте следующее. Пример кода показывает окно предупреждения

$(".navbar-toggler").on("click", function() {
        alert("Hello");
});

Обратите внимание, что этот код срабатывает, если кто-то нажимает на любую кнопку navbar-toggler на вашем сайте - если у вас их несколько, все сработают! Если вы хотите запустить его только тогда, когда кто-то щелкнет по указанному выпадающему переключателю c, вам нужно дать ему идентификатор и сделать $("#your_id"). вместо $(".navbar-toggler").

, если вы не используете jQuery, проще всего было бы назначить событие onclick для вашей кнопки:

<button class="navbar-toggler" [...] onclick="doSomething()">

, а затем написать JavaScript функцию doSomething (), которая делает все, что вы хотите.

Если вы скажите мне, какую анимацию вы хотите активировать, я мог бы рассказать вам немного больше. (Также, как примечание: вы должны задавать только один вопрос на пост. Именно так работает переполнение стека, и вы получите ответы быстрее)

Answer 2

Итак, прежде всего, чтобы сделать ваш последний li для cursor:pointer, у вас есть два варианта:

Либо поместите href="#" в тег <a>, например: <a href="#" class="nav-link dropdown-toggle" ...</a>, либо вы используйте это свойство в css: a:hover { cursor: pointer }

Чтобы раскрасить выпадающий черный, попробуйте это:

.dropdown-menu > a { background-color:black; color:white; }