如何更改引导程序 4 上的导航栏悬停颜色? [英] How to change navbar hover color on bootstrap 4?

查看:19
本文介绍了如何更改引导程序 4 上的导航栏悬停颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要将导航栏悬停颜色更改为其他颜色.我设法自己更改了导航栏文本颜色,但找不到正确的颜色来更改检查元素的悬停颜色.

然后我在stackoverflow上查找以前的asnwers,但它们不适用于我的代码.任何投入将不胜感激!

<html lang="zh-cn"><头><!-- 必需的元标记--><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Bootstrap 4 基本模板</title><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><style type="text/css">html,身体 {溢出-x:隐藏;}.navbar-light .navbar-brand {颜色:#FFFFFF;}.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light.navbar-nav .show>.nav-link {颜色:#FFFFFF;}.navbar-light .navbar-nav .nav-link {颜色:#FFFFFF;}</风格><身体><nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #0275D8;"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarNavDropdown"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">功能</a><li class="nav-item"><a class="nav-link" href="#">定价</a><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉链接</a><div class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><a class="dropdown-item" href="#">这里还有别的东西</a>

</nav><footer class="footer fixed-bottom text-center"><span class="text">在此处放置粘性页脚内容.</span></页脚>

<!-- 可选的 JavaScript --><!-- 首先是 jQuery,然后是 Popper.js,然后是 Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本></html>

解决方案