如何将Bootstrap的Navbar-Nav中的Li Elem Color悬停

在我的项目中，我使用bootstrap ui。

我在主页中有navbar，并且具有带有nav navbar-nav类的UL标签。

此UL标签中有产品和市场。

现在，当鼠标结束时，应该更改产品和市场。

我已经用hove来定义：

<style>
active :hover{color:green}
</style>

但不幸的是，它奏效了。

这是我的页面代码：

<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8"><title>Starter Template for Bootstrap</title>
<link href="jsui/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="jsui/easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript" src="jsui/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
  <style>
  active :hover{color:green}
   </style>
 <nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid" style="height:70px">
<div class="navbar-header">
    <a class="navbar-brand" href="#"><img src="pic/logo.png" style="width:130px;height:40px;margin-top:2px"></a>
</div>
<div>
    <ul class="nav navbar-nav" style="visibility: visible;">
        <li class="active"><a href="#">product</a></li>
        <li class="active"><a href="#">market</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                customer <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">John</a></li>
                <li><a href="#">Sam</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
</nav>  
</body>

谁可以帮助我？

您的html很好，您对CSS中的选择者有问题。

选择"产品"one_answers"市场"的正确方法是：

.navbar .nav li.active a:hover{color:green}

只是为了解释选择器：
我们首先寻找<nav>上的.navbar类元素。
然后我们给它一个空间(否则它将尝试找到两个类在同一元素上。
之后，我们寻找.nav，这是<ul>上的类 ( descendent <nav class="navbar">(如果您尝试选择只有一个直接的儿童您将使用儿童选择">"。
最后但并非最不重要的一点，我们给它一个空间，然后选择每个<li>元素哪个具有.active类(请注意，之间没有空间 " Li"one_answers" Active"(
最后，我们正在寻找<a>元素，因为文本是在其中写的，并给它 :hover(无空间( 伪类

在这里您可以查看工作笔

相关内容

最新更新

热门标签：