当前位置: 首页 > 知识库问答 >
问题:

Twitter引导导航栏按钮悬停时颜色发生变化

咸浩初
2023-03-14

在我的Twitter引导网站,我有一个导航栏。
我为它们添加btn-成功或btn-危险类用于颜色标记。
我这样做是因为当用户更改主题(css)时,按钮会显示在该主题上。

我使用的是导航条反向。所以背景是黑色的。我将按钮链接的颜色更改为白色。但问题是,当用户将鼠标悬停在按钮上时,按钮变为透明,颜色无法读取。

所以我需要导航栏按钮是可见的,即使用户在上面悬停。我希望悬停与否时按钮颜色相同。

我的小提琴:http://jsfiddle.net/mavent/4RhhF/15/

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header" style="text-align:center;">
        <div style="padding-top: 15px;"> 
            <a href="/page0" style="color:#ffffff;margin-top:40px;">Example.com</a>    
        </div>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a class="btn btn-danger" style="color:#000" href="#">
                    <span>MyButton is very good</span>
                </a>    
            </li>
            <li>
                <a class="btn btn-success" style="color:#000" href="#">
                    <span>MyButton is very good 2</span>
                </a>    
            </li>
        </ul>
    </div>
</nav>

共有1个答案

汪阳飇
2023-03-14

您必须在自定义css文件中添加以下内容:

/* This would be for the danger button... */
.navbar-inverse .navbar-nav>li>a.btn-danger:hover {
    background-color: #d9534f;
}

/* ...and this one for the success button */
.navbar-inverse .navbar-nav>li>a.btn-success:hover {
    background-color: #5cb85c;
}

您基本上是手动重新着色悬停上每个按钮的背景色。

这是你最新的小提琴。

 类似资料:
  • 我不知道我的CSS有什么问题。我试图通过修改默认引导颜色来创建一个名为“btn-success2”的新类,该类具有新的颜色。我试图将悬停颜色设置为白色,但它只改变了一半。顶部仍然是相同的绿色。 我的代码如下: jsfiddle:https://jsfiddle.net/ms4uk83e/

  • 在Bootstrap 4中,如何更改导航栏的背景颜色?twbsColor的代码不起作用。我想让背景颜色变成不同的颜色,字体颜色变成白色。

  • 我现在有一段html,它代表我的导航栏的相关部分: 我有一个css,我希望用它来改变导航栏的文本颜色: 唯一的问题是文本颜色保持不变。我还看到一个非常相似的问题没有解决。我打赌谁能解决这个问题,谁就能解决另一个问题。

  • > 点击一个按钮,我想设置btn危险引导类。我已经在按钮上附加了一个ng click事件,因此不确定如何获得按钮的句柄并仅更改该按钮上的css。我看到的示例中有一个jquery click事件处理程序,但不确定这是否是最好的方法 请您就如何处理上述两个问题提出建议?

  • 我需要一些帮助我想改变工具提示基于按钮主色。 例如:如果按钮具有“主色”,则工具提示也应为“主色”。。。 超文本标记语言: jQuery: 实例:https://codepen.io/themes4all/pen/NWabvad

  • 只是尝试在CSS中练习悬停和下拉。在下面的代码中,我希望每当下拉子div(带有Home1文本的绿色div)悬停在上面时,的背景色(红色)应该更改为蓝色。 会很感激你的帮助。 null null