HTML 导航栏答案

【问题标题】：HTML Navigation BarHTML 导航栏
【发布时间】：2018-06-16 22:28:04
【问题描述】：

在导航栏元素方面需要帮助。

我在更改导航栏项目样式时遇到问题。

我想将文本颜色从默认的蓝色更改。此外，将悬停颜色更改为红色。

更改导航项参数不起作用。

不知道需要改什么参数。

提前谢谢你。

代码如下：

.nav-item {
    color: #e0e0e0;
    font-family: 'Open Sans', sans-serif;
    }

    font-family: 'Open Sans', sans-serif;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
	 <title>Bootstrap Example</title>
	<!-- Symbols coding -->
	 <meta charset="utf-8">

	<!-- Window change, depends on the screen resolution  -->
	 <meta name="viewport" content="width=device-width, initial-scale=1">
  
	 <!-- Connecting Fonts library -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	
	<!-- Connecting Bootstrap styles -->
	<link rel="stylesheet" href="css/bootstrap.min.css">

	<!-- Connecting personal style file(style.css) -->
	<link rel="stylesheet" href="css/styles.css">

</head>

<body>

	<!-- Container to center navbar on the page and to center content in the navbar --> 
	<div class="container">

	<!-- Centered navbar, which become vertical on a small screen -->	
	<nav class="navbar navbar-expand-sm justify-content-center sticky-top" style="background-color: #313030;">

		<ul class="navbar-nav">
			<!-- Active - highlight the current link --> 
		    <li class="nav-item active">
		      <a class="nav-link" href="#">Link 1</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Link 2</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Link 3</a>
		    </li>
  		</ul>
  	
	</nav>

	</div>


	  
	<div class="container">
	  <h3>Basic Navbar Example</h3>
	  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
	</div>
	


	<!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
	<!-- JS Bootstrap scripts --> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您需要在nav-link 元素而不是nav-item 上应用样式。

.nav-item .nav-link {
  color: #e0e0e0;
  font-family: 'Open Sans', sans-serif;
}

.nav-item:hover .nav-link {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <!-- Symbols coding -->
  <meta charset="utf-8">

  <!-- Window change, depends on the screen resolution  -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Connecting Fonts library -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <!-- Connecting Bootstrap styles -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- Connecting personal style file(style.css) -->
  <link rel="stylesheet" href="css/styles.css">

</head>

<body>

  <!-- Container to center navbar on the page and to center content in the navbar -->
  <div class="container">

    <!-- Centered navbar, which become vertical on a small screen -->
    <nav class="navbar navbar-expand-sm justify-content-center sticky-top" style="background-color: #313030;">

      <ul class="navbar-nav">
        <!-- Active - highlight the current link -->
        <li class="nav-item active">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>

    </nav>

  </div>



  <div class="container">
    <h3>Basic Navbar Example</h3>
    <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
  </div>



  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- JS Bootstrap scripts -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

【讨论】：

非常感谢！但是如何将悬停应用于框（而不是文本）？ .nav-item:hover { 颜色:红色;}

【解决方案2】：

.nav-item a {
    color: #e0e0e0;
    font-family: 'Open Sans', sans-serif;
 }
 .nav-item a:hover{ color:red;}

使用锚标签改变颜色

【讨论】：