Início / coding / Perguntas / 79082926
Accepted
Andrus
Asked: 2024-10-13 18:42:04 +0800 CST

Como tornar o fundo do item de menu ativo mais visível

  • 772

Como tornar o fundo deste item de menu ativo azul ou mais escuro, como nos menus dos aplicativos da área de trabalho do Windows?

insira a descrição da imagem aqui

O menu suspenso do Bootstrap 5 é criado usando este código (também no JSFiddle ):

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
      </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

html

1 respostas

  1. Best Answer

    Você quer que ele tenha uma cor diferente quando passar o mouse. Você precisa escrever um estilo para isso. Então você pode dar a cor que quiser aqui. O código abaixo explica como mudar a cor dos elementos. Você pode escolher a cor que quer adicionar.

    <style>
      .dropdown-item:focus, .dropdown-item:hover {
        background-color: blue !important;
        color:white !important;
      }      
  </style>

    Demonstração

    .dropdown-item:focus, .dropdown-item:hover {
            background-color: blue !important;
            color:white !important;
          } 
    <!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Action
      </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

    • 3

relate perguntas