I'm trying to make this hover animation but it's not working

Question

I used this website as a source to learn how to make the hover animation.

Here is my HTML:

.navLinks {
  font-family: 'Raleway';
  font-size: .9em;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  position: relative;
}

.navLinks:hover {
  color: #000;
  /* border-left: 1px solid white;
  border-right: 1px solid white;
  padding: .5em .5em; */
}

.navLinks:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navLinks:hover: {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<nav class="container">
  <div class="menu1">
    <a href="#home" class="navLinks">Home</a>
  </div>

  <div class="menu2 ">
    <a href="#upcoming" class="navLinks">Upcoming Tournaments</a>
  </div>

  <div class="logo">
    <p>It's Academic</p>
  </div>

  <div class="menu3">
    <a href="#history" class="navLinks">History</a>
  </div>
  <div class="menu4">
    <a href="#faq" class="navLinks">Contact Info</a>
  </div>

</nav>

I only put in the code that pertains to the animation. So I'm not sure why this isn't working but there's no animation when I hover.

syntax issue `navLinks:hover:before` – Temani Afif Jun 02 '18 at 18:38 — Temani Afif, Jun 02 '18 at 18:38

score 0 · Answer 1 · answered Jun 02 '18 at 18:51

0

Also can you change the color for the hover animation ? For instance :

.navLinks:hover {
   color:red;
}

Maybe the hover animation is working but since you don't change anything, your can't see it (by default, your text is black).

answered Jun 02 '18 at 18:51

Nohossat

9
2

The hover animation is supposed to make an underline when hovering, not change the color so it's still visibly not working :/ – Jun 02 '18 at 19:51
sorry, I wrote too fast – Nohossat Jun 03 '18 at 00:58

score 0 · Answer 2 · answered Jun 02 '18 at 18:54

you need to put the links inside another element for it to work ! Just like in the example I provided, and you should have modified your previous question rather than posting a new one.

div > a {
    position: relative;
    color: #000;
    text-decoration: none;
}

div > a:hover {
  color: #000;
}

div > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

div > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<nav class="container">
  <div class="menu1">
    <a href="#home" class="navLinks">Home</a>
  </div>

  <div class="menu2 ">
    <a href="#upcoming" class="navLinks">Upcoming Tournaments</a>
  </div>

  <div class="logo">
    <p>It's Academic</p>
  </div>

  <div class="menu3">
    <a href="#history" class="navLinks">History</a>
  </div>
  <div class="menu4">
    <a href="#faq" class="navLinks">Contact Info</a>
  </div>

</nav>

Sorry about that, I am new to this website. Also, how do I change the gap between the underline and the text and also the size/boldness of the underline? Which class do I add this CSS to? — , Jun 02 '18 at 20:12

score 0 · Answer 3 · answered Jun 02 '18 at 22:18

There was a mistake with targeting the (pseudo)element in your CSS. .navLinks:hover would target .navLinks. If you want to target the .navLinks::before when hovering on .navLinks, write it like this: .navLinks:hover::before.

You don't need to change anything about your HTML.

Note: Officially, pseudo-elements are written with double :: but : works too. I used double colons, but don't worry about using singles!

.navLinks {
  font-family: 'Raleway';
  font-size: .9em;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  position: relative;
}

.navLinks:hover {
  color: #000;
  /*   border-left: 1px solid white;
  border-right: 1px solid white;
  padding: .5em .5em; */
}

.navLinks::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.navLinks:hover::before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

<nav class="container">
  <div class="menu1">
    <a href="#home" class="navLinks">Home</a>
  </div>

  <div class="menu2 ">
    <a href="#upcoming" class="navLinks">Upcoming Tournaments</a>
  </div>

  <div class="logo">
    <p>It's Academic</p>
  </div>

  <div class="menu3">
    <a href="#history" class="navLinks">History</a>
  </div>
  <div class="menu4">
    <a href="#faq" class="navLinks">Contact Info</a>
  </div>

</nav>

I'm trying to make this hover animation but it's not working

3 Answers3