gpt4 book ai didi

html - Bootstrap NavBar 的自定义样式

转载 作者:行者123 更新时间:2023-11-28 01:43:37 27 4
gpt4 key购买 nike

我正在尝试使用完全不同的样式更改 Bootstrap 导航栏。

这就是我需要更改其默认样式的方式 -

enter image description here

目前我已经完成了 80% 以上的工作,唯一无法完成的是它的 hoveractive Action 。

到目前为止,这是我的 CSS -

.navbar-default {
background-color: #000000;
border-color: #ffffff;
border-top: 1px solid #fff;
border-radius: 0;
border-left: none;
border-right: none;
}

.navbar-default .navbar-brand {
color: #f5f5f5;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}

.navbar-default .navbar-text {
color: #999999;
}

.navbar-default .navbar-nav > li > a {
color: #f5f5f5;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
background-color: red;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: transparent;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}

.navbar-default .navbar-toggle {
border-color: #333333;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #333333;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color: #ffffff;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #f5f5f5;
border-bottom-color: #f5f5f5;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}

.navbar-default .navbar-link {
color: #f5f5f5;
}

.navbar-default .navbar-link:hover {
color: #ffffff;
}

.navbar-default .nav > li {
border-right: 1px solid #FFFFFF;
}

.navbar-default .nav > li:last-child {
border-right: none;
}

.navbar-default .navbar-nav > li > a {
font-size: 90%;
font-weight: bold;
padding: 12px 24px;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
outline: none;
}

.navbar-nav {
background: #53001e;
border: 1px solid #FFFFFF;
border-radius: 7px;
float: right;
margin-top: -20px;
}

那么,我可以从这里的专业人士那里得到任何帮助,在不使用任何图像的情况下完成这项工作吗?

This is the way I have tried it.

任何想法都将不胜感激。谢谢。

最佳答案

您可以使用 shadow 上的 属性:悬停(browsers that support it):

我对你的做了一些改动jsBin :

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
outline: none;
-webkit-box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
-moz-box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
box-shadow: 0px 18px 17px 0px rgba(152, 46, 255, 0.59);
}

所以如果你对 IE 没问题,你可以使用这个属性>=9.0

关于html - Bootstrap NavBar 的自定义样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24188005/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com