Question

我的导航栏没有显示悬停效果。我添加了以下CSS代码，但它不起作用。

container a:hover {
  color: #555;
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}

我该怎么办？

这是我的CSS / HTML代码：

＆＃13;

.container {
  overflow: hidden;
  background-color: #FFFFFF;
  font-family: Arial;
  top:0;
  left:0;
  padding: 5px; 
}

.container a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

＆＃13;

<div class="whole-div">
  <div class="container">
    <body data-spy="scroll" data-target=".navbar" data-offset="50">
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <a href="#section1">Toehold Switch</a>
          <a href="#section2">Interlab</a>
          <a href="#section3">Charaterization</a>
          <a href="#section4">Program</a>
        </ul>
    </div>
  </div>
  </div>
</div>

＆＃13;

Answer 1

您忘记了班级声明中的期限。当我添加一个句点时，看起来它工作正常。尝试一下，让我知道会发生什么。

{{1}}

{{1}}

Answer 2

嘿，您的代码没问题，但您可能忘记在CSS中添加容器类的一个点（在第一行）。

＆＃13;

/* you have missed a dot at the first line user   .container a:hover   instead of   container a:hover   in your CSS */

.container a:hover {
  color: #555;
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}

.container {
  overflow: hidden;
  background-color: #FFFFFF;
  font-family: Arial;
  top:0;
  left:0;
  padding: 5px; 
}

.container a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

＆＃13;

<div class="whole-div">
  <div class="container">
    <body data-spy="scroll" data-target=".navbar" data-offset="50">

      <div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <a href="#section1">Toehold Switch</a>
            <a href="#section2">Interlab</a>
            <a href="#section3">Charaterization</a>
            <a href="#section4">Program</a>
          </ul>
        </div>
      </div>

＆＃13;

Answer 3

我注意到的错误在您的第一个CSS代码中，您忘记.指定您定位的是container类。

另请查看以下代码段：

.container a:hover {
  background-color: green;
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}
.container {
  overflow: hidden;
  background-color: yellow;
  font-family: Arial;
  top:0;
  left:0;
  padding: 5px; 
}

.container a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

<div class="whole-div">
  <div class="container">
    <body data-spy="scroll" data-target=".navbar" data-offset="50">

      <div id="myHover">
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <a href="#section1">Toehold Switch</a>
            <a href="#section2">Interlab</a>
            <a href="#section3">Charaterization</a>
            <a href="#section4">Program</a>
          </ul>
        </div>
      </div>

  </div>
</div>

您可以使用代码来使用this等在线代码编辑器使其更加精彩。

如何将悬停效果添加到我的导航栏

3 个答案: