CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Alan Chiu
Alan Chiu

Reputation: 75

How to add a hovering effect to my navbar

My navbar does not show a hovering effect. I have added the following CSS code but it doesn't work.

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

What should I do?

Here is my CSS/HTML code:

.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;
}
<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>

Upvotes: 0

Views: 81

Answers (3)

Sumon Tito
Sumon Tito

Reputation: 105

Hey your code is okay but you may be forget to add a dot of your container class in CSS (at the first line). 

/* 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;
}
<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>

Upvotes: 0

Moh K
Moh K

Reputation: 514

The error I noticed is in your first CSS code you forgot . to designate that you are targeting class container.

hover over image

Also have a look the snippet code below: 

.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>

You might play around with the code to make it more awesome by online code editor like this.

Upvotes: 0

Zach Harriott
Zach Harriott

Reputation: 123

You forgot the period in your class declaration. When I add a period to it, it looks like it works fine. Try it out and let me know what happens.

.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;
}
<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>

Upvotes: 1

Related Questions