主页 / coding / 问题 / 79082926
Accepted
Andrus
Asked: 2024-10-13 18:42:04 +0800 CST

如何使活动菜单项背景更加清晰可见

  • 772

如何使此活动菜单项背景变成蓝色或更深，就像在 Windows 桌面应用程序菜单中一样？

在此处输入图片描述

Bootstrap 5 下拉菜单是使用此代码创建的（也在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 个回答

  1. Best Answer

    您希望它在悬停时具有不同的颜色。您需要为此编写一个样式。所以你可以在这里给出你想要的颜色。下面的代码解释了如何更改元素的颜色。您可以选择要添加的颜色。

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

    演示

    .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

相关问题