Question

我使用导航标签创建了导航。

我不想在悬停时设置颜色，但我不能

我试过了，但没有工作。

.tab2:hover {
    background-color: green;
}

.tab3:hover {
    background-color: green;
}

HTML

<div class="col-md-10">
    <nav class="row">
        <ul class="nav nav-tabs">
            <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-user"></span> Name &nbsp &nbsp<span class="glyphicon glyphicon-chevron-down"></span> </a></li>
            <li class="tab1"><a href="#"><span class="glyphicon glyphicon-flag"></span>Text Link </a> </li>
            <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-envelope"></span> Message </a> </li>
            <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-oil"></span>10 </a> </li>
            <li class="tab1"><a href="#"><span class="glyphicon glyphicon-asterisk"></span> &nbsp </a> </li>
            <li class="tab1"><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp </a> </li>
            <li class="tab2"><a href="#"> <span class="glyphicon glyphicon-chevron-down"></span> &nbsp &nbsp KATEGORIJE </a></li>
            <li class="tab2"><a href="#">RADNJE</a></li>
            <li class="tab2"><a href="#">VOZILA</a></li>
            <li class="tab2"><a href="#">NEKRETNINE</a></li>
            <li class="tab2"><a href="#">NAJNOVIJE</a></li>
            <li class="tab2"><a href="#">HITNO</a></li>
            <li class="tab2"><a href="#">USLUGE</a></li>
            <li class="tab2"><a href="#"> &nbsp &nbsp &nbsp &nbsp<span class="glyphicon glyphicon-chevron-down"></span> &nbsp &nbsp OSTALI LINKOVI </a></li>
        </ul>
    </nav>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}


.nav>li>a {
    padding: 10px 3px;
    font-weight: bold;
    color:white;
    font-size: 13px;
}
.tab1 {
    background-color:#324255;
    height: 42px;
}

.tab2 {
    background-color:#405072;
    height: 42px;
}
.tab3 {
    background-color: #405072;
    height:42px;

}
.nav-tabs li {
    border-left: 1px solid #52617b;
    border-right: 1px solid #52617b;

}

ul {
    background-color: #405072;
    height:43px;
}


.tab2:hover {
    background-color: green;
}

.tab3:hover {
    background-color: green;
}

Answer 1

我会尝试尽可能具体，以便您理解这一切。 1.当我将你的html和css粘贴在小提琴中时，我忘了在html中添加bootstrap样式表的链接。 Bootstrap使用您可能知道的CDN，它允许您链接到他们的样式表而无需下载并实际将其放在您的网站文件夹中。这是我所指的链接：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

我刚刚在小提琴的所有html中添加了这个。

回答您原来的问题。 Bootstraps样式表正在覆盖样式表。

您的<li>工作正常，背景为绿色。但<a>有自己的背景颜色，来自bootstrap。

请参见此处https://jsfiddle.net/otuy1foo/3/。在css中，我将css代码放在底部的注释中。

/*This is the css you need to add*/
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover {
    border-color: transparent !important;
    background-color: transparent !important;
}

为什么我无法在导航标签悬停时更改颜色

1 个答案: