悬停时文本周围的灰色盒状轮廓

时间:2017-10-30 02:53:35

标签: css html5 twitter-bootstrap

我在引导程序中使用自定义导航3.文本周围似乎出现了一个灰色的框,每当我在它周围盘旋时,我都试过在我的css中评论a:hover代码,但盒子仍然出现。这是我的代码:



kFold

	.navbar-custom {
    background-color:#36b;
    color:#ffffff;
    border-radius:0;
	height:68px;
	margin-bottom: 0;
    }
	
	.navbar-custom .navbar-nav > li > a {
		color:#fff;
		text-align: center;
    	padding-left: 0;
	    padding: 25px 0 75px 0;
	    font-family: 'Open Sans', sans-serif;
	    font-weight:300;
	    font-size:13px;
	}
	
	.navbar-custom .navbar-nav > .active > a {
		color: #ffffff;
		background-color:transparent;
	}
	
	.navbar-custom .navbar-nav > li > a:hover,
	.navbar-custom .navbar-nav > li > a:focus,
	.navbar-custom .navbar-nav > .active > a:hover,
	.navbar-custom .navbar-nav > .active > a:focus,
	.navbar-custom .navbar-nav > .open >a {
		text-decoration: none;
		color:#ec6800;
	}
	.navbar-custom .navbar-brand {
		color:#eeeeee;
	}

	.navbar-custom .navbar-toggle {
		background-color:#eeeeee;
	}
	.navbar-custom .icon-bar {
		background-color:#33aa33;
	}




2 个答案:

答案 0 :(得分:0)

Bootstrap有自己的规则,您需要更改或覆盖。它' S:

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #eee;
}

您可以将自己的规则设置为:

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: inherit;
}

<强> Bootply example

答案 1 :(得分:0)

灰色框由以下css引起:

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #eee;
}

尝试覆盖它:

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}