Question

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

我在主页面中有导航栏，并且它带有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>

谁能帮帮我？

Answer 1

您的HTML很好，您在CSS中的选择器出了点问题。

选择＆＃34;产品＆＃34;的正确方法和＃34;市场＆＃34;将是：

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

只是解释选择器：

我们首先查看.navbar上的<nav>类   元件。

然后我们给它一个空格（否则它会尝试找到两个类   在同一个元素上。

之后我们会在.nav上查找<ul>这是一个班级   （<nav class="navbar">的后代）如果您尝试选择   只有直接孩子才能使用儿童选择器＆＃34;＆gt;＆＃34;。

最后但并非最不重要的是，我们给它一个空格并选择每个<li>元素   它有.active类（请注意，它们之间没有空格   ＆＃34;利＆＃34;和＆＃34; .active＆＃34;）

最后，我们正在寻找<a>元素，因为文本   写在里面并给它:hover（无空间），这是一个   的伪类

Here you can check out the working Pen

如何在引导程序的导航navbar-nav中悬停li elem颜色

1 个答案: