如何更改 HTML 中下拉按钮的行为答案

【问题标题】：How to change the behavior of dropdown buttons in HTML如何更改 HTML 中下拉按钮的行为
【发布时间】：2021-03-24 23:50:07
【问题描述】：

我有一个菜单，其中有按钮作为菜单项。其中一个菜单项是下拉按钮。我正在使用 Bootstrap 和 CSS 进行编码。一切正常，除非我单击下拉菜单项之一。当我这样做时，名为“更多”的下拉按钮变为绿色，“更多”一词消失，所以我看到的只是一个绿色的不透明按钮。我已将“更多”按钮的文本轮廓设为绿色，以便从中获取颜色。否则，当菜单下拉项链接没有被点击时，按钮的颜色为黑色。下拉菜单项本身的链接正在更改为正确的颜色，因此该部分没有问题。

这是菜单的代码：

.button-primary-override:hover, 
.button-primary-override:active, 
.button-primary-override:focus,
.button-primary-override:visited {
  background: rgba(0, 0 ,0 ,0.3) !important;
}
.button-primary-override a:hover,
.button-primary-override a:active, 
.button-primary-override a:focus,
.button-primary-override a:visited {
  background: rgba(0, 0 ,0 ,0.3) !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>


<div class="row pl-4 pr-4 pt-2 pb-1 myBanner d-block"> 
  <div class="content d-flex">
    <div class="flex-fill pb-1">
      <a type="button" class="btn text-light" style="font-size:16px" href="#">Menu 1</a>
    </div>
    <div class="flex-fill pb-1">
      <a type="button" class="btn text-light" style="font-size:16px" href="#">Menu 2</a>
    </div>
    <div class="flex-fill pb-1">
      <a type="button" class="btn text-light" style="font-size:16px" href="#">Menu 3</a>
    </div>
    <div class="flex-fill dropup">
      <button type="button" class="btn text-success btn-outline-success button-primary-override dropdown-toggle" data-toggle="dropdown" style="font-size:16px">More</button>
      <div class="dropdown-menu myBanner2 mb-1">
        <a class="dropdown-item text-light" href="#">Link 1</a>
        <a class="dropdown-item text-light" href="#">Link 2</a>
        <a class="dropdown-item text-light" href="#">Link 3</a>
        <a class="dropdown-item text-light" href="#">Link 4</a>
      </div>
    </div>
 </div>
</div>

理想情况下，当用户单击下拉菜单项时，应该会出现一个带有“更多”字样的黑色按钮。

实际上，我并不介意这种颜色 - 如果更容易保持这种颜色，绿色是可以接受的，但我想让按钮透明并且“更多”字样可见。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

我想这就是你想要的。你不是简单地阐述你的问题。这个Link 也会帮助你

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>


<div class="row pl-4 pr-4 pt-2 pb-1 myBanner d-block"> 
  <div class="content d-flex">
    <div class="flex-fill pb-1">
      <a type="button" class="btn " style="font-size:16px" href="#">Menu 1</a>
    </div>
    <div class="flex-fill pb-1">
      <a type="button" class="btn " style="font-size:16px" href="#">Menu 2</a>
    </div>
    <div class="flex-fill pb-1">
      <a type="button" class="btn " style="font-size:16px" href="#">Menu 3</a>
    </div>
    <div class="flex-fill">
      <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" style="font-size:16px">More</button>
      <div class="dropdown-menu myBanner2 mb-1">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
        <a class="dropdown-item" href="#">Link 4</a>
      </div>
    </div>
 </div>
</div>

【讨论】：

如果我按原样使用，您的解决方案将有效。但是，一旦我将“text-success btn-outline-success”添加到按钮“更多”的类中，按钮的行为就会回到问题中描述的状态：按钮变为绿色并且单词单击菜单下拉项时，“更多”会消失。 @Ammad Amir
text-success 是绿色文本的引导类，当您使用此类时，即使您将鼠标悬停在按钮上，它也会将您的文本变为绿色，检查此 link 以获取引导文本颜色
是的，我知道“成功” = 绿色。它没有解释为什么文本“更多”消失以及为什么整个按钮的背景颜色变为绿色，而不仅仅是轮廓或文本。 @Ammad Amir

【解决方案2】：

我能够通过不使用 Bootstrap 的“按钮轮廓”属性来解决问题。我从课程中删除了button-outline-success，并使用 CSS 添加了大纲。我按照w3schools - Outline Buttons 的说明在按钮周围画了轮廓。

css 是：

.button-primary-override {
  border: 1px solid #5cb85c;
  color: #5cb85c;
  text-decoration:none;
  cursor: pointer;
  border-color: #5cb85c;
}  

.button-primary-override:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #5cb85c;
}

html 是：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>


<div class="row pl-4 pr-4 pt-2 pb-1 myBanner d-block"> 
  <div class="content d-flex">
    <div class="flex-fill pb-1">
      <a type="button" class="btn text-light" style="font-size:16px" href="#">Menu 1</a>
    </div>
    <div class="flex-fill pb-1">
      <a type="button" class="btn text-light" style="font-size:16px" href="#">Menu 2</a>
    </div>
    <div class="flex-fill pb-1">
      <a type="button" class="btn text-light" style="font-size:16px" href="#">Menu 3</a>
    </div>
    <div class="flex-fill dropup">
      <div class="flex-fill dropup"><button type="button" class="btn button-primary-override dropdown-toggle" data-toggle="dropdown" style="font-size:16px;">More</button>
      <div class="dropdown-menu myBanner2 mb-1">
        <a class="dropdown-item text-light" href="#">Link 1</a>
        <a class="dropdown-item text-light" href="#">Link 2</a>
        <a class="dropdown-item text-light" href="#">Link 3</a>
        <a class="dropdown-item text-light" href="#">Link 4</a>
      </div>
    </div>
 </div>
</div>

现在，当我单击一个下拉菜单项时，按钮的背景变为略微透明的黑色，并且按钮上仍可见文本“更多”（绿色）。当没有单击任何内容时，您会在透明的黑色背景上看到一个带有“更多”的按钮，并且您可以在按钮周围看到一个绿色轮廓。（我选择了十六进制颜色代码#5cb85c，这样它就可以模拟 Bootstrap 的“成功”颜色的绿色。）

所以我认为按钮变为不透明绿色并且文本消失的原因是“button-outline-success”属性。

【讨论】：