Bootstrap关于导航条点击后移出此区域背景颜色变白

Bootstrap中导航条组件要求放入在nav并且类名为navbar navbar-defautl(default可换)，
的标签内。

<nav class="navbar navbar-default"></nav>

但navbar-default会自动给这个导航条添加一些默认背景样式,在实际开发场景中，自然不会使用官方给的默认样式。

所以我就想着给nav定一个新的class并为其添加样式

很明显背景颜色和其他样式都添加成功，并且可以正常使用导航条的功能。

不管是点击后触发的事件还是下拉框的展开都能成功运行，但当我还没给a标签href添加地址时，我点击了此标签，虽然什么都没触发，但当我把鼠标移出此区域时就出现问题了。

当我点击后移出此li的区域后,背景颜色被变成了灰白色。
我以为是nav标签自带的标签事件,但我在控制台检查标签样式时没有发现任何的关于背景颜色改变过的样式。

在我连同Bootstrap的js文件css文件全部检查过后,发现是没加navber-default的原因
，js文件中为其绑定一个鼠标移出事件，当移出后将背景颜色改为灰白。

解决方案

<head><style type="text/css">.navbar {border-radius: 0;border: 0;}nav.navbar-default{background-color: #c11010;border-color: #c11010;}</style>
</head>
<nav class="navbar navbar-default"></nav>

为nav添加navbar-default默认样式类，
此时会发现点击并移出后样式没有发生改变,但是为导航条增加了白色的圆角
所以必须将.navbar样式表中的圆角去除并把navbar-default的默认背景颜色设置为你所中意的样式即可修复

Bootstrap关于导航条点击后移出此区域背景颜色变白相关推荐

flask系列---模板的继承及Bootstrap实现导航条（四）
在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条.导航 ...
【解决方法】点击bootstrap里导航条nav里的下拉菜单无反应)
[解决方法]点击bootstrap里导航条nav里的下拉菜单无反应 nav 导航条下拉菜单 nav 导航条下拉菜单只需要按顺序引入以下3个文件即可:
点击导航高亮 html,jQuery实现的导航条点击后高亮显示功能示例
本文实例讲述了jQuery实现的导航条点击后高亮显示功能.分享给大家供大家参考,具体如下: www.jb51.net jQuery导航条点击后高亮显示 #nav li {float: left; wi ...
bootstrap制作导航条案例
bootstrap制作导航条案例 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
四十五、使用bootstrap制作导航条
使用bootstrap制作导航条参考链接:https://v3.bootcss.com/components/#navbar 项目结构工具使用: Bootstrap Button Generato ...
html指定区域的背景颜色,JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法..具体实现方法如下: 代码如下: JS实现点击颜色块切换指定区域的背景颜色适时切换网页指定区域背景颜色请选择背景: function g ...
element更改导航菜单被选中项的背景颜色
element更改导航栏被选中项的背景颜色在使用element的导航栏菜单时,官方文档指明可以改变导航栏的的背景颜色,字体颜色以及选中项的字体颜色,但是有时我们想要使用自定义颜色.在F12中可以看见 ...
Python Matplotlib数据可视化绘图之（六）————图片大小、颜色、标题、纵横坐标、画布和绘图区域背景颜色、Legend(图例)等的参数设置详解
文章目录前言一.图片大小的设定和调节 1. 三种调整matplotlib图片大小的方法 1.1 plt.figure(figsize=(n, n)) 1.1.1 代码如下: 1.1.2 输出结果如 ...
table表格中某条数据不符合条件该条数据背景颜色变灰的写法
业务背景:点击table表中的某条数据,调用接口,判断缴费截止日期是否在今天之后,在今天之前的,给出提示,并且该条数据的背景颜色便会该项目所用到的是vue+element 1.首先在table的表头 ...
Bootstrap（导航条）
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

Bootstrap关于导航条点击后移出此区域背景颜色变白

解决方案

Bootstrap关于导航条点击后移出此区域背景颜色变白相关推荐

最新文章

热门文章